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

Computedプロパティは、別のデータプロパティまたは計算値に基づいて値を返します。あなたの場合は、引数として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

計算プロパティが