仅在选择第一个下拉菜单后，如何启用第二个下拉列表？

Question

我使用v-for动态创建了三个下拉列表。现在，我无法执行以下任务。例如，

1）我希望第一下拉列表被启用，以便用户可以选择一个选项。

2）尚未选择第二和第三下拉菜单 ，必须将其禁用。

3）用户从第一个下拉列表中选择一个选项后，第二个下拉列表将被启用，但第三个< / strong>下拉菜单将保持禁用

4）用户从第二下拉菜单中选择一个选项后，第三下拉菜单将被启用，供用户选择一个选项从它

Edit1 仍在尝试解决此问题，非常感谢您的帮助！

Edit2 仍在尝试解决此问题，有人可以帮助我吗？

Edit3 这是可与https://codepen.io/Issaki/pen/RzzxvL

一起使用的Codepen

下面是我当前的代码：

    <template>
  <div>
    <!-- Dynamically create the select dropdowns using v-for -->
    <div v-for="(attribute, index) in attributes" :key="index">
      <label>{{attribute.type}}</label>

      <!-- Dynamically render the id to keep track of which dropdown was selected -->
      <select
        @change="selectedValue($event)"
        :id="'option' + index"
        v-model="selectedValues[index]"
      >
        <option value>Select option</option>
        <option v-for="(value, index) in attribute.values" :key="index">{{value}}</option>
      </select>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // Do note that, the size of this array is not fixed.
      // At the moment, there is only three objects in the array
      attributes: [
        {
          type: "Color",
          values: ["Black", "White", "Yellow"]
        },
        {
          type: "Size",
          values: ["Small", "Medium", "Large"]
        },
        {
          type: "Finish",
          values: ["Shiny", "Glossy"]
        }
      ],

      selectedValues: []
    };
  },

  methods: {
    selectedValue(e) {
      console.log(e);
      console.log(this.selectedValues);
      if (e.target.id === "option0") {
        if (this.selectedValues[0] === "") {
          document.getElementById("option1").disabled = true;
          document.getElementById("option2").disabled = true;
        } else {
          document.getElementById("option1").disabled = true;
          document.getElementById("option2").disabled = true;
        }
      }
    }
  }
};
</script>

Answer 1

我认为没有必要诉诸元素ID或直接操作DOM。您只需将disabled属性（取决于已选择的值数量）设置为模板，即可将其全部保留在模板中。

只需将select传递给index处理程序，即可确定哪个@change已被更改。

new Vue({
  el: "#app",

  data: {
    attributes: [
      {
        type: "Color",
        values: ["Black", "White", "Yellow"]
      },
      {
        type: "Size",
        values: ["Small", "Medium", "Large"]
      },
      {
        type: "Finish",
        values: ["Shiny", "Glossy"]
      }
    ],

    selectedValues: []
  },

  methods: {
    selectValue (index, value) {
      const newValues = this.selectedValues.slice(0, index)

      if (value) {
        newValues.push(value)
      }

      this.selectedValues = newValues
    }
  }
})

<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<div id="app">
  <div v-for="(attribute, index) in attributes" :key="index">
    <label>{{ attribute.type }}</label>
    <select
      @change="selectValue(index, $event.target.value)"
      :value="selectedValues[index]"
      :disabled="selectedValues.length < index"
    >
      <option :value="undefined">Select option</option>
      <option v-for="(value, index) in attribute.values" :key="index">{{ value }}</option>
    </select>
  </div>
  <div>{{ selectedValues }}</div>
</div>