如何更新 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 定义为计算值，但它不引用任何响应式，因此它的值永远不会更新。如果你改用一个方法，每次调用都会计算它，你会得到当前值。

如何更新 Vue 数据以反映用户输入所做的 HTML 更改

How to update Vue data to reflect changes in the HTML made by user input

javascript

vue.js

virtual-dom