我有一个Vue组件,它将根据用户之前在前一个组件中点击的内容显示数据。当他们最初点击时,我设置'当前'索引。然后,当他们到达下一页时,我有一个将在数据数组中查找并返回“当前”数据的getter。
他们被重定向到的组件是他们可以编辑的表单。我希望能够预先填充“当前”数据。不作为占位符,而是作为实际值,以便他们可以直接编辑它。
问题是我不知道如何将从getter返回的值设置为数据函数值,以便它们可以与v-model绑定。
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" >
VUE
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不起作用。
*如果我绑定占位符,数据显示正确,所以getter函数正确返回currentArea
答案 0 :(得分:9)
data
方法仅在初始化期间触发一次,在设置计算属性之前触发。因此,在currentArea
方法中引用data
不会在执行时undefined
工作。
如果this.$store.getters.currentArea
预计在此组件的生命周期内没有变化,那么在mounted
钩子中设置一次数据属性最简单:
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;
}
答案 1 :(得分:2)
@thanksd:谢谢你的回答。 我正在开发一个场景,其中状态存储在vuex中,暂时发送不完整到组件,然后通过提取更新。 它应该以一种形式编辑。
我的解决方案是在vuex中使用getter导出部分状态:
getters: {
getItemDetail: (state, getters) => (id) => {
let item = state.openedItems.items.find(i => i.id === id);
return item ? item.data : null;
}
}
通过组合数据,计算和监视属性在组件中使用它(并在lodash的帮助下深度克隆对象):
data () {
return {
itemDetail: null
};
},
computed: {
itemData () {
return this.$store.getters.getItemDetail(this.item.id);
}
},
watch: {
itemData (n, o) {
this.itemDetail = _.cloneDeep(n);
}
}
最后,我将输入绑定到“itemDetail”(在我的示例中使用elemen开关):
<el-switch v-model="itemDetail.property"></el-switch>
对我来说(但我对Vue很陌生),这似乎是一个很好的工作妥协。