清除 Vue JS v-for 选择字段答案

【问题标题】：Clearing Vue JS v-for Select Field清除 Vue JS v-for 选择字段
【发布时间】：2021-04-29 12:35:59
【问题描述】：

我有一个简单的应用程序，它在生成两个选择标记的select 语句中使用v-for。创建select 语句的groupedSKUAttributes 变量如下所示：

groupedSKUAttributes = {colour: [{id: 1, name: 'colour', value: 'red'},
                                 {id: 2, name: 'colour', value: 'blue'}],
                        size: [{id: 3, name: 'size', value: '40'},
                               {id: 4, name: 'size', value: '42'}]}

我还有一个按钮，我想清除 select 字段。 如何获得clear 方法以使每个select 字段选择其默认<option value='null' selected>select a {{ attributeName }}</option> 值？我不知道我是否打算使用v-model这里是groupedSKUAttributes。任何建议将不胜感激。

模板如下所示：

<template>
  <div>
    <select
      v-for='(attribute, attributeName) in groupedSKUAttributes'
      :key='attribute'
      @change='update(attributeName, $event.target.value)'>
      <option value='null' selected>select a {{ attributeName }}</option>
      <option
        v-for='a in attribute'
        :value='a.id'
        :label='a.value'
        :key='a.id'>
      </option>
    </select>
  </div>
  <button @click='clear'>clear</button>
</template>

JS 脚本是这样的：

<script>
export default {
  name: 'app',
  data() {
    return {
      groupedSKUAttributes: null,
    }
  },
  methods: {
    clear() {
      console.log('clear');
    },
    update(attributeName, attributeValue) {
      console.log(attributeName, attributeValue);
    },
    getSKUAttributes() {
      API
        .get('/sku_attribute/get')
        .then((res) => {
          this.skuAttributes = res.data;
          this.groupedSKUAttributes = this.groupBy(this.skuAttributes, 'name');
        })
        .catch((error) => {
          console.error(error);
        });
    },
  },
  created() {
    this.getSKUAttributes();
  }
}
</script>

【问题讨论】：

标签： vue.js select v-for

【解决方案1】：

v-model 指令在 v-for 中运行没有任何问题。

<script>
  export default {
    name: 'app',

    data() {
      return {
        groupedSKUAttributes: null,
        selected: {}
      }
    },

    methods: {
      clear() {
        this.generateDefaultSelected(this.generateDefaultSelected);
      },
      update(attributeName, attributeValue) {
        this.selected[attributeName] = attributeValue;
      },
      getSKUAttributes() {
        API
          .get('/sku_attribute/get')
          .then((res) => {
            this.skuAttributes = res.data;
            this.groupedSKUAttributes = this.groupBy(this.skuAttributes, 'name');

            // Call this method to reset v-model
            this.generateDefaultSelected(this.groupedSKUAttributes);
          })
          .catch((error) => {
            console.error(error);
          });
      },

      generateDefaultSelected(groupedSKUAttributes) {
        // Reset the object that maintains the v-model reference;
        this.selected = {};

        Object.keys(groupedSKUAttributes).forEach((name) => {
          // Or, set it to the default value, you need to select
          this.selected[name] = '';
        });
      }
    },

    created() {
      this.getSKUAttributes();
    }
  }
</script>

在上面的代码中，generateDefaultSelected 方法重置了维护所有选择的 v-model 的 selected 对象。

在模板中，可以使用v-model或单向value/@change对：

<!-- Using v-model -->
<select
  v-for='(attribute, attributeName) in groupedSKUAttributes'
  :key='attributeName' v-model="selected[attributeName]">


<!-- Unidirection flow without v-model -->
<select
  v-for='(attribute, attributeName) in groupedSKUAttributes'
  :key='attributeName' :value="selected[attributeName]"
  @change='update(attributeName, $event.target.value)'>

【讨论】：