Vueの2 iの入力やリストとの問題を抱えているリスト

Question

を模索してアクティブなクラスを追加し、私は下の要素をリストアップし、クラスを追加するために、入力から通過したい

<div class="control"> 
     <label class="label">Input Test</label> 
     <input type="text" class="input" @keydown="keyHandler"> 
     <ul> 
     <li v-for="suggestion in suggestions" v-bind:class="{active}">{{suggestion.message}}</li> 
     </ul> 
    </div> 

methods : { 
    keyHandler(e){ 
     if(e.keyCode === 38){ 
     e.preventDefault(); 
     console.log('arrow up') 
     this.currentKey = e.key 
     } 
     else if(e.keyCode === 40){ 
     e.preventDefault(); 
     console.log('arrow down') 
     this.currentKey = e.key 
     } 
    } 
    } 

ここれますフィドル：https://jsfiddle.net/o8fwf0gh/13/

私は助け

Answer 1

に感謝だろうが、これがお役に立てば幸いです。

var app = new Vue({ 
    el: '#form', 
    data: { 
    currentKey: null, 
    suggestions: [{ 
     message: 'Foo' 
    }, { 
     message: 'Bar' 
    }, { 
     message: 'Foobar' 
    }, { 
     message: 'pikachu' 
    }, { 
     message: 'raichu' 
    }], 
    active: false 
    }, 
    methods: { 
    keyHandler(e) { 
     if (e.keyCode === 38) { 
      e.preventDefault(); 
      console.log('arrow up') 
      this.setActiveClass(this.currentKey, e.key) 
      this.currentKey = e.key 
     } else if (e.keyCode === 40) { 
      e.preventDefault(); 
      this.setActiveClass(this.currentKey, e.key) 
      console.log('arrow down') 
      this.currentKey = e.key 
     } 
     }, 
     setActiveClass(previousKey, currentKey) { 
     if (previousKey) { 
      var tempIndex = this.suggestions.findIndex(x => x.class ==  "active"); 
      this.$set(this.suggestions[tempIndex], 'class', 'inactive') 
      if (currentKey === 'ArrowDown') { 
      if (tempIndex === this.suggestions.length - 1) 
       this.$set(this.suggestions[0], 'class', 'active') 
      else 
       this.$set(this.suggestions[tempIndex + 1], 'class', 'active') 
      } else { 
      if (tempIndex === 0) 
       this.$set(this.suggestions[this.suggestions.length - 1], 'class', 'active') 
      else 
       this.$set(this.suggestions[tempIndex - 1], 'class',  'active') 
      } 
     } else { 
      if(currentKey === 'ArrowUp') 
      this.$set(this.suggestions[this.suggestions.length - 1], 'class', 'active') 
      else 
      this.$set(this.suggestions[0], 'class', 'active') 
      } 
     } 
     } 
    } 
}) 

とHTMLで次の操作を行うことができます

<li v-for="suggestion in suggestions" v-bind:class='suggestion.class'>{{suggestion.message}} 

の作業例here

Answer 2

あなたは何ができるかは、データプロパティを更新する、のがselectedを言わせて、あなたがあるべき場所でありますリスト。

data: { 
    selected: 0, 
    // other data stuff 
} 

が上下に押すと、あなたは明らかなようthis.selected更新する必要が矢印：デフォルトでは、我々は最初の要素が選択されるように、0にそれを設定します

methods : { 
keyHandler(e){ 
    if(e.keyCode === 38){ 
     e.preventDefault(); 
     this.selected--; 
    } 
    else if(e.keyCode === 40){ 
     e.preventDefault(); 
     this.selected++; 
    } 
} 

あなたはクラスのプロパティの内部を見る何

<li v-for="(suggestion, index) in suggestions" :class="index === selected ? 'active' : ''">{{suggestion.message}}</li> 

：あなたは、その後のようなあなたのリストを設定することができます}

簡略構文として知られています。これは基本的に、インデックスが現在選択されているリスト番号と等しい場合に「アクティブ」を返すif文です。ご覧のように、インデックスはv-forの中の2番目のプロパティとして渡されます。

私があなたが達成しようとしていることを正しく理解していれば、これはトリックを行うべきです。 ：P