我有一个包含许多字段的表单。根据用户选择的类型,某些字段应该可见或不可见。我想使用计算属性有条件地显示和隐藏字段,但我不想对每个属性进行编码,因为属性有很多。我宁愿以编程方式从字段名称数组创建计算属性。我的尝试如下,但没有成功。我究竟做错了什么?
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.9/vue.js"></script>
<html>
<div id="app">
<select v-model="type">
<option v-for="option in options" :value="option.value">
{{ option.text }}
</option>
</select>
<p>showA: {{ showA }}</p>
<p>showB: {{ showB }}</p>
<p>showC: {{ showC }}</p>
<p>dynamicShowA: {{ dynamicShowA }}</p>
<p>dynamicShowB: {{ dynamicShowB }}</p>
<p>dynamicShowC: {{ dynamicShowC }}</p>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
message: 'Hello World!',
type: 'Type1',
options: [
{ text: 'Type1', value: 'Type1' },
{ text: 'Type2', value: 'Type2' },
],
fieldLists: {
'Type1': ['A', 'C'],
'Type2': ['B', 'C'],
},
fields: ['A', 'B', 'C'],
}
},
computed: {
selectedFields() {
return this.fieldLists[this.type]
},
showA() {
return this.selectedFields.includes('A')
},
showB() {
return this.selectedFields.includes('B')
},
showC() {
return this.selectedFields.includes('C')
},
},
created() {
for (let field of this.fields) {
this.addProp(field, () => { this.selectedFields.includes(field) })
}
},
methods: {
addProp (fieldName, getter) {
const propName = `dynamicShow${fieldName}`
const computedProp = {
get() {
return getter()
}
}
this[propName] = computedProp
},
}
});
</script>
</html>