如何重置在没有v-model的数组内选择

Question

问题

我需要重置Vue.js中没有v-model s的数组中的所有<div id="app"> <div v-for="(element, index) in elements"> <select @input="setElement(index, $event.target.value)"> <option v-for="option in options" :value="option">{{option}}</option> </select> </div> <button @click="addElement"> Set three elements </button> </div> 。

模板

new Vue({
  el: '#app',
  data() {
    return {
      options: ['a', 'b', 'c'],
      elements: [{
        element: ''
      }, {
        element: ''
      }]
    }
  },

  methods: {
    addElement() {
        this.elements = []
        this.elements.push({
          element: ''
        })
        this.elements.push({
          element: ''
        })
        this.elements.push({
          element: ''
        })
      },

      setElement(index, el) {
        let element = {
          element: el
        }

        this.$set(this.elements, index, element)
      }
  }
})

脚本

elements

演示：https://jsfiddle.net/jqb99tks/4/

愿望

当select的长度发生变化（例如重置）时，应重置select。

方法

我可以遍历所有HTML computed: { subcategories() { return [...this.subcategories, ...[ this.$store.getters['categories/subcategoriesOfCurrent'] ]]; } } 并手动重置它们，但这感觉就像是一个被黑客入侵的解决方案。

Answer 1

之所以发生这种情况，是因为Vue试图重用HTML并防止昂贵的重新渲染它认为可以这样做。在您的情况下，它选择不重新选择框。要告诉框架您希望重新呈现HTML（例如在重置所选值的情况下），您只需要使用与先前呈现值不同的唯一键道具：

<div v-for="(element, index) in elements">
  <select :key="index + elements.length" @input="setElement(index, $event.target.value)">
    <option v-for="option in options" :value="option">{{option}}</option>
  </select>
</div>

请注意，我添加了:key="index + elements.length"。 elements.length要使密钥取决于elements的长度，仅index是不够的，因为它将是相同的，即0,1等等。

另请注意，要使其正常工作，您需要修改setElement方法，因为它目前正在做一些奇怪的事情，this.$set(this.elements, index, element)是一个问题。把它改成这样的东西：

setElement(index, value) {
  this.$set(this.elements[index], 'element', value)
}

演示： https://jsfiddle.net/jqb99tks/6/

Answer 2

这对你来说可能更好。 v-model可用于选择＆＃39;。

https://jsfiddle.net/loocao/jqb99tks/8/

<div v-for="(element, index) in elements">
  <select v-model="element.element">
    <option v-for="option in options" :value="option" :selected="element.element === option">{{option}}</option>
  </select>
</div>

方法：

addElement() {
    // first select
    this.elements.splice(0,1,{element: ''})
    // add one
    this.elements.push({element: 'a'})
}