通过 v-model 附加 textarea 以与其他变量一起计算

Question

我有绑定到计算属性的输入文本区域，如下所示：

<v-text-field
  label="Message"
  v-model="offer"
  multi-line
></v-text-field>
<div v-html="offer"></div>

return {
   var1: "some text",
   var2: "some text2",

   computed: {
      offer () {
         return this.var1 + this.var2 
      },
   }
}

我的意图是能够在 text-field 内部编辑来自我的变量的输入文本（不要编辑变量的来源）并能够动态添加它们（如 true-false）。到目前为止，文本在输入中正确显示。不幸的是，当我开始输入或编辑时出现错误：

[Vue warn]: Computed property "offer" was assigned to but it has no setter.

有人知道怎么解决吗？奖励问题：如何使 var1 和 var2 显示在 text-field 输入的单独行中？

编辑：我将我的计算修改为：

offer: {
    get() {
        return this.var1 + this.var2
    },
    set() {
      return this.offer
    }
},

并且它 returns 这两个变量的值到我的 html。但是我不能在我的文本字段中编辑这个值。这是我的主要问题。我不想修改 var1 和 var2。我想在我的文本字段中修改 this.offer 的值。

编辑2：

我将我的计算修改为：

offer: {
    get() {
        return this.var1 + this.var2
    },
    set(value) {
      var text = value
      this.offerNew = text
    }
},

然后我输出{{offerNew}}

现在它可以/某种程度上/工作了，我可以编辑我的文本字段并将其输出到 html。但是，当我将 var1: "some text" 更改为 var1: "some other text inside variable" 时。我的整个 offerNew 文本都重置了，但我认为这就是计算的工作方式...

我想要达到的结果是：

textfield:
some text, some text 2, writing something like lorem ipsum

output {{offerNew}} -> some text, some text 2, writing something like lorem ipsum

然后将 var1 更改为 "some other text"

想拥有：

textfield:
some other text, some text 2, writing something like lorem ipsum

output {{offerNew}} -> some other text, some text 2, writing something like lorem ipsum

但我得到了：

textfield:
some other text, some text 2
output {{offerNew}} -> some other text, some text 2

Answer 1

以下是设置方法。变化：

computed: {
    offer () {
        return this.var1 + this.var2
    },
}

收件人：

computed: {
    offer: {
        get() {
            return this.var1 + this.var2
        },
        set(newValue) {
            this.var1 = newValue;
            this.var2 = '';
        }
    },
}

现在，注意 setter 处的逻辑。我将新值分配给 var1，将空字符串分配给 var2。也许你想要一些不同的东西，比如将这两个变量之间的值分成两半或其他东西。只有你自己知道。

不更改变量

如果您想将变量用作基值，更简洁的方法是将 offer 变回常规 data（因此它是可编辑的），并且观察 var1 和var2 变量，当其中一个变量改变时改变offer。

new Vue({
  el: '#app',
  data: {
    var1: "some text",
    var2: "some text2",
    offer: ''
  },
  created() {
    this.offer = this.var1 + '\n' + this.var2;
  },
  watch: {
    var1: function (newVar1) {
      this.offer = newVar1 + '\n' + this.var2;
    },
    var2: function (newVar2) {
      this.offer = this.var1 + '\n' + newVar2;
    }
  },
  methods: {
    changeVars() {
      this.var1 = 'i am var1';
      this.var2 = 'var2 is ' + new Date().getSeconds();
    }
  }
});

<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-content>
      <v-btn @click="changeVars" small>CLICK TO CHANGE var1 and var2</v-btn>
      
      <v-text-field
          label="Message"
          v-model="offer"
          multi-line
      ></v-text-field>
      <div v-html="offer"></div>

    </v-content>
  </v-app>
</div>

通过 v-model 附加 textarea 以与其他变量一起计算

Attaching textarea by v-model to computed with other variables

javascript

vue.js

vuejs2

vuetify.js

不更改变量