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

我将Vue用于一个小应用程序，它在用户填写表单后将一段动态HTML复制到用户的剪贴板。所有这些都可以很好地工作，但在执行了一次copy方法之后，我似乎无法反映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
}
})

相关部分是计算数据输入和方法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>

---

单击按钮时，输入数据应每次刷新，但只工作一次。此后，无论我做什么，剪贴板上的内容都保持不变。

您已将输入定义为计算输入，但它不引用任何反应，因此其值永远不会更新。如果改用某个方法，则每次调用该方法时都会对其进行求值，您将得到当前值。

感谢这些指针！我假设每次调用一个计算值时都会重新分配它，例如通过代码中的copySignature之类的方法。这似乎是违反直觉的，它不是。。。我现在正在研究指令，并将在找到解决方案后发回。每次调用一个方法时都会对其进行评估。现在我想起来了，你可能只需要使用一个方法而不是一个计算的方法。这似乎很管用@Roy J！如果你把这个建议加在你的答案上，我可以接受。谢谢你，伙计！