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

我遇到需要在检测到状态更改时更新数据的情况。用户需要能够在textarea中进一步更改此信息。使用计算属性会根据我的需要提取数据，但在此之后用户所做的任何更改都会被覆盖，因为计算属性会一直将此数据更改回其初始值。最初在状态变化时提取数据的最好方法是什么，但在那之后允许进行编辑？需要与计算属性相同的功能，但我需要能够在初始更改后更新数据

谢谢！

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

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

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

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

mounted() { 
    this.exampleFunction(); 
}

来源

2017-07-19 Pyreal

更新exampleData为item：

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

这样你就可以绑定你exampleData到文本框，但更改item还是会影响它。

如果你想exampleData最初将被设置为item值，这样做，在组件的mounted钩：

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

Here's a fiddle.

来源

2017-07-19 17:46:41 thanksd

这似乎工作正常，我将不得不研究文档，以真正理解这是如何工作的引擎盖下，虽然它看起来像它正在寻找任何项目的变化，然后运行一次功能，然后之后所做的任何更改aren因为物品保持不变，所以不会再运行。谢谢您的帮助。 – Pyreal

我的初始Watcher工作正常，我有另一个设置在单独的组件看单独的数据点，但第二个没有触发，是否有一个技巧，在多个组件中使用多个观察器？ – Pyreal

如果您在data设置你的财产，你可以在mounted初始化只运行一次，当页面加载：

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

，然后在您的textarea的设置v-model

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

因此，textarea的值将从“此文本被初始化”开始，但用户将能够更改它，而这些变化将在观察者被保存在text

来源

2017-07-19 17:45:08 Libby

我试过，但它似乎像安装功能之前“获得”状态的组件运行对象，安装的函数需要正确设置本地数据，我做错了什么？有没有一种方法可以告诉让它在执行前等待正确的信息？ – Pyreal

在'data'中声明对象后''挂载'函数应该运行。你能显示你的代码吗？ – Libby

我更新了原始文章，向您展示了我尝试使用挂载时的逻辑。这对我来说并不像我想象的那样工作，计算将会正确执行，但是我不能在textarea内（通过V模型）更改存储的数据，因为它总是会回到计算属性所在的位置返回。 – Pyreal

Vue公司已经有一个内置的解决方案来处理这个如果您使用的获取/设置语法为computed properties

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'

来源

2017-07-19 17:54:29

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

回答

相关问题