Vue.js 2：如何绑定到组件方法？

Question

我有一个 VueJS (v2) 组件，其中包含一个私有对象数组 this.private.messagesReceived，我希望将其显示在文本区域中。该数组应通过方法/函数转换为字符串，并且 Vue 阻止了我所有的绑定尝试。每次尝试都会导致我的序列化函数（将数组转换为字符串）仅被调用一次，并且在数据更改时不再被调用。

我觉得必须有一种方法可以在没有 Vue.set() 或一些 forceUpdate 恶作剧的情况下做到这一点。

https://jsfiddle.net/hdme34ca/

尝试 1：计算方法

这里我们遇到的问题是 Vue 只调用我的计算方法 messagesReceived1 一次并且再也不会。

<script>
{
  computed: {
    messagesReceived1() {
      console.log("This is called once and never again even when new messages arrive");
      return this.private.messagesReceived.join("\n");
    },
  ...
  methods: {
    addMessage(m) {
      console.log("This is called multiple times, adding messages successfully");
      this.private.messagesReceived.push(m);
    }
  }
<script>
<template>
  <textarea rows="10" cols="40" v-model="messagesReceived1"></textarea>
</template

尝试 2：绑定方法

这里 Vue 决定它不喜欢 textarea {{ messagesReceived2() }} 内的胡须，并且犹豫不决。它也不允许在v-model 中使用messagesReceived2() 或messagesReceived2。

<script>
{
  methods: {
    messagesReceived2() {
      return this.private.messagesReceived.join("\n");
    },
    addMessage(m) {
      console.log("This is called multiple times, adding messages successfully");
      this.private.messagesReceived.push(m);
    }
  }
</script>
<template>
  <textarea rows="10" cols="40">{{ messagesReceived2() }}</textarea><!--Nope-->
  <textarea rows="10" cols="40" v-model="messagesReceived2()"></textarea><!--Nope-->
  <textarea rows="10" cols="40" v-model="messagesReceived2"></textarea><!--Nope-->
</template

Answer 1

您可以定义数据变量并在函数中设置其值。然后用textarea绑定变量，而不是直接用函数。