配列内の個々の要素のクラスをどのようにアクティブにしますか？ [Vue.js]

Question

私は入力ごとにクラスを個別に有効にしたいと思います。私は2つの入力が同じvモデルとクラスにバインドされています。私は、何かが真であるかどうかをチェックするメソッドを持っています。真であれば、バインドされたクラスを有効にします。現在、すべての入力に対してクラスを有効にしています。 （最終的な目標は、アレイ内の要素のための複数の入力を検索することであり、それは一致した場合、クラスにのみ、その要素のためにアクティブに）これについて

<input v-model="highlightTest" id="1" v-bind:class="{ active: active }" v-on:keyup="Highlighting"></input> 

<input v-model="highlightTest" id="2" v-bind:class="{ active: active }" v-on:keyup="Highlighting"></input> 

Highlighting: function() { 
    if (this.highlightTest != '') { 
    this.active = true; 
} 
else { 
this.active = false; 
} 

Answer 1

方法：

<template> 
    <input v-for="(hi,index) of highlights" v-model="highlights[]" v-bind:class="{ active: highlights[index] }" v-on:keyup="highlighting(index)"></input> 
</template> 

<script> 
export default{ 
    data() { 
     return { 
      highlights: [] 
     }; 
    }, 
    created() { 
     this.$http.get('some/api').then(res => { 
      // map: convert 0,1 to false,true 
      this.highlights = res.json().map(h => h==1); 
     }); 
    }, 
    methods: { 
     highlighting(index) { 
      if (this.highlights[index]) { 
       // this.highlights[index] = false won't let vue detect the data change(thus no view change) 
       this.highlights.splice(index, 1, false); 
      } else { 
       this.highlights.splice(index, 1, true); 
      } 
     } 
    } 
} 
</script> 

Answer 2

ここに一つの方法です（ところで遅れて申し訳ありません）それを行う

HTML：

<div id="app"> 
     <p :class="{'active': activateWord(word)}" v-for="word in words">@{{ word }}</p> 
     <input type="text" v-model="inputText"> 

    </div> 

CSS：

の

.active { 
    color: red; 
} 

JS：

const app = new Vue({ 
    el: '#app', 
    data: { 
     inputText: '', 
     words: [ 
     'foo', 
     'bar' 
     ] 
    }, 
    methods: { 
     activateWord(word) { 
      return this.inputText === word 
     }, 
    }, 
}) 

here「SAフィドル