我正在尝试根据下拉列表中的值显示/隐藏组件的一部分。在移动窗体的这一部分之前，使用计算属性就可以了。然而。。。我在组件中使用双向绑定，似乎我正在使用的属性的计算值更新得太晚了。这是组件 js
Vue.component('system', {
template: '#system',
props: ['name', 'count'],
computed: {
issummit: function() {
return this.name === '5a37fda9f13db4987411afd8';
}
// audiovideo: function() {
// return this.system === params.id.easy3eeg || this.system === params.id.easy3psg || this.system === params.id.essentia;
// }
},
data () {
return {
systemname: this.name,
systemcount: this.count,
systemoptions: [
{ text: 'Select One', value: null },
{ text: 'Summit', value:'5a37fda9f13db4987411afd8'},
{ text: 'Essentia', value:'5a37fda1de9e84bb9c44a909'},
{ text: 'Alterna', value:'5a8caadc86dc269de9887b0f'},
{ text: 'Easy III PSG', value:'5a37fe27b1e43d5ca589aee3'},
{ text: 'Easy III EEG', value:'5a37fd9a08a387d4efcf9ddb'},
{ text: 'IOMAX', value:'5a8cab59a1353f170f6e92a4'},
{ text: 'Cascade Pro', value:'5a8cab696f6a77f774e8de7f'}
]
}
},
watch: {
name (name) {
this.systemname = name;
},
count (count) {
this.systemcount = count;
}
},
methods: {
updateName: function() {
this.$emit('update:name', this.systemname);
},
updateCount: function() {
this.$emit('update:count', this.systemcount);
}
}
});
这是组件模板
<script type="text/x-template" id="system">
<b-row>
<b-form-group class="col-sm" label="Count">
<b-form-input type="number" @change="updateCount" required v-model="systemcount" class="col-sm"></b-form-input>
</b-form-group>
<b-form-group class="col-sm" label="System">
<b-form-select @change="updateName" :options="systemoptions" required v-model="systemname"></b-form-select>
</b-form-group>
<!-- Summit Options -->
<template v-if="issummit">
<b-form-group class="col-sm" label="Channels">
<b-form-input type="number" required v-model="summitchannels"></b-form-input>
</b-form-group>
<b-form-group label="Accessories">
<b-form-checkbox-group v-model="summitaccessories" :options="summitoptions">
</b-form-checkbox-group>
</b-form-group>
</template>
</b-row>
</script>
<script src="scripts/system.js"></script>
这是正在使用的模板
<system v-for="system in systems"
:name.sync="system.name"
:count.sync="system.count">
</system>
计算值确实会更新...但是，问题是它似乎在使用确定渲染后会更新。如果我在下拉列表中选择"峰会"，我希望我的组件的隐藏部分会显示出来，直到我选择其他内容才会显示它......第二次我进行选择时，将使用上次尝试的计算值。
编辑根据一些建议，我编辑了选择以使用常规 DOM 对象，这解决了问题。但是，当我将其移动到模板时，这才成为一个问题......桃子之前一切都很有效...有什么想法吗？
<div role="group" class="col-sm b-form-group form-group">
<label class="col-form-label pt-0">System</label>
<div>
<select @change="updateName" class="form-control custom-select" required v-model="systemname">
<option v-for="o in systemoptions" :value="o.value">{{o.text}}</option>
</select>
</div>
</div>
我在 https://jsfiddle.net/3vkqLnxq/1/中的复制品很少
它按预期工作。更改是所有标记都更改为 domb-*。
所以最可能的原因是b-form-select有一些问题。
您应该对绑定的计算属性数据使用 getter 和 setter。
像这样：
computed: {
issummit: {
// getter
get: function () {
return this.name === '5a37fda9f13db4987411afd8';
},
// setter
set: function (newValue) {
this.systemname = newValue;
}
}
}
更多：
https://v1.vuejs.org/guide/computed.html#Computed-Setter
我解决了更改
@change="更新名称">
自
@change.native="updateName">
(https://v2.vuejs.org/v2/guide/components.html#Binding-Native-Events-to-Components)
这让我使用"真正的"直接更改事件(而不是太晚的事件)来解决我的问题。