Question

我遇到需要在检测到状态更改时更新数据的情况。用户需要能够在textarea中进一步更改此信息。使用计算属性可以完全按照我的方式提取数据，但是在此之后用户所做的任何更改都会被覆盖，因为计算属性会不断将此数据更改回其初始值。什么是最初在状态变化时引入数据但在此之后允许编辑的最佳方法？

谢谢！

编辑：更新了我为@Libby尝试过的内容。

<textarea v-model="exampleData"></textarea>

computed: {
        ...mapGetters({
            item: 'item'
        })

methods: {
    exampleFunction() {
       this.exampleData = this.item;
}

mounted() {
    this.exampleFunction();
}

Answer 1

如果您在data中设置了自己的属性，则可以在mounted中对其进行初始化，该页面仅在加载页面时运行一次：

data:
   text: null
mounted: ->
   text = "This text is initialized"

然后在textarea上设置v-model

<textarea v-model="text"></textarea>

因此textarea的值将以＆＃34开始;此文本已初始化＆＃34;，但用户将能够更改它，并且这些更改将保存在{{1}中}

Answer 2

在exampleData的观察者中更新item：

watch: {
  item(value) {
    this.exampleData = value;
  }
}

这样您就可以将exampleData绑定到文本字段，但item的更改仍会影响它。

如果您希望exampleData初始设置为item的值，请在组件的mounted挂钩中执行此操作：

mounted() {
  this.exampleData = this.item;
}

Here's a fiddle.

Answer 3

如果你使用computed properties

的getter / setter语法，Vue已经有了一个内置的解决方案来处理这个问题

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

因此，当状态更改时，您可以通过为其分配值来更新计算机属性：

// state has changed in text area handler
this.fullName = 'new value'

需要与计算属性相同的功能，但我需要能够在初始更改后更新数据

3 个答案: