Question

带有选项的选择是动态生成的。单击“ GO”按钮后，选择选项将再次使用不同的数据生成。但是问题是当用户选择选项1并自动单击“开始”时，从下一个选择中选择了选项1，如何清除呢？

我的代码：

<select v-model="key" @change="onChange($event)">
    <option v-for="(option, index) in passSelect"  :value="index" v-if="option!==null" :data-foo="option" @click="onChange($event)" @click="onClick($value)">
       {{ option }}
     </option>
 </select> 
 <button @click="onChildClick" class="button">Go -></button>

方法：

    onChildClick() {
        this.counter++;
        this.loadAgain();
    },
    getSelect(){
        this.passSelect = this.checkExist();
    },
    onChange(event) {
        this.selectedIndex =  event.target.value;
        this.selectedValue =  event.target.options[event.target.value].dataset.foo;
    },
    loadAgain(){
        this.getSelect();
    },

Answer 1

选择由v-model（使用属性key）决定。在将index用于value时，这将导致选择与上一个列表具有相同index的选项。

您需要清除key的值才能重置<select>：

new Vue({
  el: '#app',

  data () {
    return {
      counter: 0,
      key: null,
      passSelect: [],
      selectedIndex: null,
      selectedValue: null
    }
  },
  
  created () {
    this.getSelect();
  },

  methods: {
    onChildClick () {
      this.counter++;
      this.loadAgain();
    },
    getSelect () {
      this.key = null;
      this.selectedIndex = null;
      this.selectedValue = null;
      this.passSelect = getOptionsList();
    },
    onChange (event) {
      const value = event.target.value;
      
      if (value) {
        this.selectedIndex = event.target.value;
        this.selectedValue = event.target.options[event.target.value].dataset.foo;  
      }
    },
    loadAgain () {
      this.getSelect();
    }
  }
})

function getOptionsList () {
  return ['Red', 'Yellow', 'Green', 'Brown', 'Blue', 'Pink', 'Black'].filter(c => {
    return Math.random() > 0.4;
  });
}

<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<div id="app">
  <select v-model="key" @change="onChange($event)">
    <option v-for="(option, index) in passSelect"  :value="index" v-if="option !== null" :data-foo="option">
      {{ option }}
    </option>
  </select> 
  <button @click="onChildClick" class="button">Go -></button>
  <p>counter: {{ JSON.stringify(counter) }}</p>
  <p>key: {{ JSON.stringify(key) }}</p>
  <p>selectedIndex: {{ JSON.stringify(selectedIndex) }}</p>
  <p>selectedValue: {{ JSON.stringify(selectedValue) }}</p>
</div>

我还清除了selectedIndex和selectedValue，以保持数据的一致性。

其他一些注意事项：

我摆脱了click上的2个<option>侦听器。不太清楚它们的用途是什么，但您不应该在同一元素上为同一事件设置2个侦听器。
key和selectedIndex几乎是同一回事。唯一的区别是selectedIndex最终是字符串，而key是数字。不清楚为什么您不只是直接将selectedIndex用于v-model。
我不知道checkExist的作用，但是passSelect认为它应该是所提供代码中的计算属性。
不需要使用data-foo将选项传递给侦听器。获得索引后，您可以直接从数据中获取相关选项。所有这些都假定您实际上需要索引，否则您可以将value直接绑定到字符串选项。

单击按钮后选择未设置的值

1 个答案: