Vue 2 通过探索列表添加活动类答案

【问题标题】：Vue 2 add class active through exploring listVue 2 通过探索列表添加活动类
【发布时间】：2018-01-08 01:53:05
【问题描述】：

我的输入和列表有问题，我想从输入到下面的列表元素，并将“活动”类添加到当前的 li 元素

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

我会很感激你的帮助

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案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

【讨论】：

太完美了！谢谢
你能告诉我当数据是建议时如何改变你的小提琴：['Foo'，'Bar'，'Foobar'，'pikachu'，'raichu']，这里是小提琴：@ 987654322@我收到“无法在字符串上创建属性'class'”错误
我使用的方法仅在您拥有对象数组时才有效。现在您已将其更改为字符串数组。因此解决方案不适用于您的新要求。

【解决方案2】：

您可以做的是更新一个数据属性，比如说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

【讨论】：