我有一个 Vue 组件,它将根据用户先前在上一个组件中单击的内容显示数据。当他们最初点击时,我设置了“当前”索引。然后当他们到达下一页时,我有一个 getter 将在数据数组中查找并返回“当前”数据。
他们被重定向到的组件是一个他们可以编辑的表单。我希望能够预先填充“当前”数据。不是作为占位符,而是作为实际值,以便他们可以直接编辑它。
问题是我不知道如何将从 getter 返回的值设置为数据函数值,以便它们可以与 v-model 绑定(bind)。
HTML
<input type="text" class="form-control" id="nickname1" v-model="name" name="name">
<input type="text" class="form-control" id="address1" placeholder="" v-model="address" name="address" >
<input type="text" class="form-control" id="city1" placeholder="" v-model="city" name="city" >
视觉
data: function() {
return {
name: this.currentArea.title,
address: this.currentArea.address,
city: this.currentArea.city,
state: this.currentArea.state
}
},
computed: {
currentArea() { return this.$store.getters.currentArea }
}
*this.currentArea.title 和 currentArea.title 不起作用。
*如果我绑定(bind)占位符,数据会正确显示,所以 getter 函数会正确返回 currentArea
最佳答案
data
方法仅在初始化期间触发一次,在计算属性设置之前。因此,从 data
方法中引用 currentArea
将不起作用,因为它在执行时将是 undefined
。
如果 this.$store.getters.currentArea
预计不会在此组件的生命周期内发生变化,最简单的方法是在 mounted< 中设置一次数据属性
钩子(Hook):
data() {
return {
name: '',
address: '',
city: '',
state: ''
}
},
mounted() {
let area = this.$store.getters.currentArea;
this.name = area.name;
this.address = area.address;
this.city = area.city;
this.state = area.state;
}
或者,如果您知道此组件的数据属性将始终与 currentArea
相同,您可以简单地返回 this.$store.getters.currentArea
在 data
方法中直接:
data() {
return this.$store.getters.currentArea;
}
关于data-binding - 如何将数据属性设置为 Vuex getter 返回的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44834822/