Vue.js 清除选择字段的Vue JS v-F

我有一个简单的应用程序，它在生成两个select标记的

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

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

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

我还有一个按钮，我想清除

select

字段如何获得

clear

方法，使每个

select

字段选择其默认值

选择一个{{attributeName}

值？我不知道我是否打算在这里为

groupedsku属性使用
v-model
。如有任何建议，将不胜感激

模板如下所示：

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

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

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


选择一个{{attributeName}
清楚的

JS脚本如下所示：

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

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

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


导出默认值{
名称：“应用程序”，
数据（）{
返回{
groupedSKUAttributes:空，
}
},
方法：{
清除（）{
console.log（'clear'）；
},
更新（attributeName、attributeValue）{
日志（attributeName，attributeValue）；
},
getSKUAttributes（）{
美国石油学会
.get（'/sku_属性/get'）
。然后（（res）=>{
this.skuAttributes=res.data；
this.groupedSKUAttributes=this.groupBy（this.skuAttributes，'name'）；
})
.catch（（错误）=>{
控制台错误（error）；
});
},
},
创建（）{
这是.getSKUAttributes（）；
}
}
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>