的Vue 2添加類通過摸索列表

我有輸入和列表的問題積極，我想從輸入經過列出以下元素，並添加類「主動」目前li元素的Vue 2添加類通過摸索列表

<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/

我會幫忙

來源

2017-08-01 matithedeveloper

希望這有助於感謝。

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

來源

2017-08-01 09:49:59 Pradeepb

這是完美的！感謝 – matithedeveloper

你能告訴我如何改變你的提琴當數據建議：「富」，「酒吧」，「Foobar的」，「皮卡丘」，「的Raichu」]，這裏是提琴：HTTPS： //jsfiddle.net/o8fwf0gh/19/我得到「無法創建屬性」類的字符串「錯誤 – matithedeveloper

我使用的方法只適用於具有對象數組的情況。現在您已將其更改爲字符串數組。所以解決方案不適合您的新需求。 – Pradeepb

你可以做的是更新數據屬性，讓我們說selected，你應該在哪裏列表。默認情況下，我們將設置它爲0，從而選擇的第一要素：

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

當按下向上或向下箭頭你顯然需要更新this.selected這樣：

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內部的第二個屬性傳遞。

如果我正確理解你想要達到的目的，這應該會有訣竅。：P

來源

2017-08-01 09:57:55 Joos

的Vue 2添加類通過摸索列表

回答

相關問題