如何解决Vue-如何在带有v-for的v-model中使用Getter / Setting
当我在getter
循环中使用getter / setter方法时,v-for
不能从Vuex Store中提取数据的某些原因。我没有收到任何错误,只是没有按应有的方式提取数据。
这是我的代码。
我的v-for循环(被截断)
<template
v-for="(detail,index) in details"
>
<v-row
:key="detail.title"
>
<v-col
cols="12"
>
<v-textarea
solo
auto-grow
flat
:placeholder="detail.placeholder"
v-model="detail.model"
rows="2"
row-height="10px"
></v-textarea>
</v-col>
</v-row>
</template>
我的数据元素details
的循环来自哪里:
details: [
{
title: "DESCRIBE YOUR BRIDAL GOWN: WHO DESIGNED IT? WHAT STYLE?",placeholder: "include your details here",model: "gown",showDivider: true
},{
title: "WHERE’S YOUR WEDDING? INCLUDE LOCATION DETAILS (E.G.,ADDRESS,TYPE,DESTINATION)",model: "weddingLocation",{
title: "WHAT DO YOU WANT YOUR BRIDESMAIDS TO WEAR? THINK PINTEREST BOARDS,NECKLINES,COLORS,AND LENGTH.",model: "theme",showDivider: false
},]
然后最后是我的吸气剂/吸气剂。在for循环之外,它们本身可以正常工作。所以它不是商店或getters / setter,而是循环和那些计算属性之间的相互作用:
computed: {
...mapGetters('wedding',[
'returnWedding',]),date: {
get() {
let day = this.returnWedding.day > 9 ? '' + this.returnWedding.day : '0' + this.returnWedding.day
let month = this.returnWedding.month > 9 ? '' + this.returnWedding.month : '0' + this.returnWedding.month
let year = this.returnWedding.year
return year + "-" + month + "-" + day
},set(value) {
this.updateLocalWedding({ bridalGown: value })
}
},gown: {
get() {
return this.returnWedding.bridalGown
},set(value) {
this.updateLocalWedding({ bridalGown: value })
}
},weddingLocation: {
get() {
return this.returnWedding.locationDetails
},set(value) {
this.updateLocalWedding({ locationDetails: value })
}
},theme: {
get() {
return this.returnWedding.theme
},set(value) {
this.updateLocalWedding({ theme: value })
}
},}
解决方法
您尝试做的事情不可能直接实现。
您需要像这样的东西
<v-textarea v-model="thisVueInstance[detail.model]" />
以便按名称引用计算的属性。问题是,您不能像这样引用模板中的当前Vue实例。这些选项都不起作用
<v-textarea v-model="this[detail.model]" />
<v-textarea v-model="[detail.model]" />
我发现有效的方法是设置一个计算属性以返回当前的Vue实例,例如
computed: {
// ...
form: vm => vm
}
然后在您的模板中使用它作为对象参考库
<v-textarea v-model="form[detail.model]" />
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。