如何檢查Vue.js類綁定當前元素的屬性？

Question

我是Vue.js的總noob，我正在嘗試構建某種漂亮的自定義選項選擇器。

我的數據綁定工作正常，但我無法弄清楚類綁定如何檢查每個節點的值。

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。

所以，我的問題是：如何比較計算函數上每個節點的值/屬性？

Answer 1

計算屬性返回基於另一個數據屬性或計算值的值。在你的情況下，你應該使用一種方法，它接受一個li索引作爲參數並返回true/false，或者只是檢查內聯相等。

此外，您還可以使用v-for生成列表項：

var mcveSample = new Vue({ 
 
    el: '#pretty_options', 
 
    data: { 
 
    field_id: 0, 
 
    options: ['One', 'Two', 'Three', 'Four', 'Five'] 
 
    }, 
 
    methods: { 
 
    select: function(index) { 
 
     this.field_id = index; 
 
    } 
 
    } 
 
});

.option { 
 
    display: inline-block; 
 
    list-style: none; 
 
    margin: 1em; 
 
    padding: 0.25em 1em; 
 
    background-color: #ccc; 
 
    border-radius: 1em; 
 
    cursor: default; 
 
} 
 
.selected { 
 
    background-color: red; 
 
}

<script src="https://unpkg.com/vue"></script> 
 
    
 
<div id="pretty_options"> 
 
    <ul class="pretty-options" data-field="field_id"> 
 
     <li class="option" 
 
     v-for="(option, index) of options" // create li from your array 
 
     v-on:click="select(index)" 
 
     v-bind:class="{ selected : index == field_id }" // check inline for example 
 
     v-bind:data-value="index">{{ option }}</li> 
 
    </ul> 
 
    <input type="number" id="field_id" name="field_id" v-model="field_id"> 
 
</div>

如果你喜歡method和/或你需要更復雜的邏輯，你可以做這樣的：

v-bind:class="{ selected : isSelected(index) }" 

並定義此方法：

methods: { 
    isSelected: function(index) { 
    return index == this.field_id 
    }, 
//...other methods 
} 

，或者最好使用返回函數計算的財產

computed:{ 
    isSelected: function() { 
    return function(index){ 
     return index == this.field_id; 
    } 
    }, 
    //...other computed propertues 
} 

Documentation

計算性能是基於它們的依賴