0
我是Vue.js的总noob,我正在尝试构建某种漂亮的自定义选项选择器。如何检查Vue.js类绑定当前元素的属性?
我的数据绑定工作正常,但我无法弄清楚类绑定如何检查每个节点的值。
HTML:
<div id="pretty_options">
<ul class="pretty-options" data-field="field_id">
<li class="option" v-on:click="select" v-bind:class="{ selected : isSelected }" data-value="1">One</li>
<li class="option" v-on:click="select" v-bind:class="{ selected : isSelected }" data-value="2">Two</li>
<li class="option" v-on:click="select" v-bind:class="{ selected : isSelected }" data-value="3">Three</li>
<li class="option" v-on:click="select" v-bind:class="{ selected : isSelected }" data-value="4">Four</li>
<li class="option" v-on:click="select" v-bind:class="{ selected : isSelected }" data-value="5">Five</li>
</ul>
<input type="number" id="field_id" name="field_id" v-model="field_id">
</div>
JS:
var mcveSample = new Vue({
el: '#pretty_options',
data: {
field_id: 1
},
methods: {
select: function(event) {
var option = event.currentTarget;
var value = option.dataset.value;
this.field_id = value;
}
},
computed: {
isSelected: function(element) {
// I'd like to do something like this:
// return this.field_id == element.dataset.value;
// But, I can't find how to check each element's value...
}
}
});
这里有一个JSFiddle。
所以,我的问题是:如何比较计算函数上每个节点的值/属性?
非常感谢你为这个广阔的缓存说明! –
不客气。 – wostex
对不起,wostex。我现在正在实现它,我面临另一个问题......如果我不能使用'v-for'(在服务器端呈现的选项)或'index'(数据值是呈现的字符串服务器端...) –