Как обновить данные Vue, чтобы отразить изменения в HTML, сделанные пользовательским вводом

Question

Я использую Vue для небольшого приложения, которое копирует динамический HTML-код в буфер обмена пользователя после заполнения формы. Все работает хорошо, но я не могу отразить изменения в HTML после выполнения метода копирования один раз. Мне кажется, что в виртуальном DOM есть что-то, чего я не совсем понял, и это мешает мне найти решение проблемы.

Это Vue JS:

var app = new Vue({
  delimiters: ['${', '}'], // Alternative delimiters for Twig+Vue
  el: '#app',
  data: {
    lastname: null,
    firstname: null,
    mailto: null,
    occupation: 'Consultant',
    absoluteurl: absBaseUrl,
    companyId: 9, // Default company ID
    companies: []
  },
  computed: {
    logo() {
      return this.absoluteurl + companies[this.companyId].logo;
    },
    setMailto() {
      return 'mailto:' + this.mailto;
    },
    input() {
      return this.$refs.signaturepreview.innerHTML;
    }
    // signatureBanner() {
    //   if (companies[this.companyId].)
    //   return companies[this.companyId].logo;
    // }
  },
  methods: {
    changeComp: function() {
      console.log('company select input changed');
    },
    copyToClipboardFF: function(text) {
      window.prompt ("Copy to clipboard: Ctrl C, Enter", text);
    },
    copySignature: function() {
      // console.log(this.input);
      var success   = true,
          range     = document.createRange(),
          selection;
      // For IE.
      if (window.clipboardData) {
        window.clipboardData.setData("Text", this.input);
      } else {
        // Create a temporary element off screen.
        var tmpElem = $('<div>');
        tmpElem.css({
          position: "absolute",
          left:     "-1000px",
          top:      "-1000px",
        });
        // Add the input value to the temp element.
        tmpElem.text(this.input);
        $("body").append(tmpElem);
        // Select temp element.
        range.selectNodeContents(tmpElem.get(0));
        selection = window.getSelection ();
        selection.removeAllRanges ();
        selection.addRange (range);
        // Lets copy.
        try {
          success = document.execCommand ("copy", false, null);
        }
        catch (e) {
          this.copyToClipboardFF(this.input.val());
        }
        if (success) {
          alert ("Signature is copied to the clipboard!");
          // remove temp element.
          tmpElem.remove();
        }
      }
    }
  },
  mounted() {
  this.companies = companies; // Get json data in the Vue instance
}
})

Соответствующая часть - это вычисленные данные input() и метод copySignature.

И HTML выглядит примерно так:

<div ref="signaturepreview" id="signature-preview" class="preview-wrapper signature-preview">

  <table class="signature" style="
    All sorts of info fetched from a form with jQuery
  </table>
</div>


<button id="validate-signature" class="button button--green" @click="copySignature">Je valide ma signature</button>

При нажатии кнопки входные данные должны обновляться каждый раз, но это работает только один раз. После этого содержимое буфера обмена остается неизменным, что бы я ни делал.

Answer 1

Вы определили input как вычисленный, но он не ссылается на что-либо реактивное, поэтому его значение никогда не обновляется. Если вместо этого вы используете метод, он будет оцениваться при каждом его вызове, и вы получите текущее значение.