不更改变量

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
    }
},

并将这两个变量的值返回给我的html。但是我无法在文本字段中编辑此值。这是我的主要问题。我不想修改var1和var2。我想在我的文本字段中修改this.offer的值。

EDIT2：

我将我的计算机修改为：

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"时。我的全部提议新文本重置，但我认为这是计算的工作方式......

我想要达到的结果是：

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

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

然后将var1更改为“其他一些文字”

希望拥有：

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 = '';
        }
    },
}

现在，请记住设定者的逻辑。我将新值分配给var1，将空字符串分配给var2。也许你想要一些不同的东西，比如将这两个变量之间的值分成两半。只有你可以告诉。

不更改变量

如果您想将vars作为基本值使用，则更简洁的方法是将offer恢复为常规data（因此可编辑），然后观看 var1和var2变量，当其中一个变化时更改offer。

＆＃13;

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();
    }
  }
});

＆＃13;

<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>

＆＃13;

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

1 个答案:

不更改变量