如何在没有 v 模型的数组内重置选择

Question

>问题

我需要重置 Vue.js 中没有 v-model 的数组中的所有select。

模板

<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)
      }
  }
})

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

希望

当elements的长度发生变化(例如复位(时，应重置select。

方法

我可以遍历所有 HTML select并手动重置它们，但这感觉就像一个被黑客入侵的解决方案。

Answer 1

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

<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模型可用于"选择"。

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'})
}