Vue JS的计算属性在使用此标记时不会被触发
<!-- language: lang-html -->
<p>£{{plant_price}}</p>
<div v-if="selected.plant.variations.length > 0 ">
<select v-model="selected.plant.selected_variation" class="form-control">
<!-- inline object literal -->
<option v-for="(variation, i) in selected.plant.variations" :selected="variation.id == selected.plant.selected_variation ? 'selected' : ''":value="variation.id">
{{variation.name}}
</option>
</select>
</div>
<!-- language: lang-js -->
var app = new Vue({
el: '#vueApp',
data: {
selected: {
type: {a: '' , b: ''},
vehicle: '',
plant: {
}
},
computed: {
plant_price: function() {
if (this.selected.plant.variations.length > 0 ) {
var variant = _.find(this.selected.plant.variations, {id: this.selected.plant.selected_variation });
return variant.price;
} else {
return this.selected.plant.price;
}
}
...
selected.plant
是通过单击植物来填充的 - 触发 updateSelected
方法。
<div class="col-sm-4" v-for="(plant, i) in step2.plants">
<div v-on:click="updateSelected(plant)" ....
methods: {
updateSelected: function(plant) {
this.selected.plant = plant; // selected plant
if (this.selected.plant.variations.length > 0 ) {
this.selected.plant.selected_variation = this.selected.plant.variations[0].id; // set the selected ID to the 1st variation
我已经通过调试器进行了检查,可以看到所有正确的属性都可用。
selected:Object
type:Object
vehicle: "Truck"
plant:Object
id:26
price:"52"
regular_price:"100"
selected_variation:421
variations:Array[2]
0:Object
id:420
name:"small"
price:52000
regular_price:52000
1:Object
etc...
我有一个计算属性,应该根据selected.plant.selected_variation
的值更新plant_price
。
我获取selected.plant.selected_variation
并搜索变体以检索价格。如果没有变体存在,则使用植物价格。
每个产品上都有一种方法可以更新所选植物。点击产品会填充selected.plant
并触发计算出的plant_price
来更新价格(因为选择的selected.plant.selected_variation
的值已更改)。
但是,计算得出的plant_price
并未通过选择触发。选择新的变体确实会更新selected.plant.selected_variation
,但我的plant_price
似乎未被触发。
因此,我通过取消嵌套selected.plant.selected_variation
来重构代码。我现在将其作为数据对象挂起:
data = {
selected_variation: ''
}
并将我的计算机属性更改为引用数据作为this.selected_variation。我的计算机属性现在有效了???这对我来说毫无意义?