如何在Vue3的下拉選單中自動選擇第一個選項

我有 2 個下拉選單，第二個會根據第一個下拉選單的選擇更改值。

我要做的就是將第二個下拉串列的第一個值設定為默認選擇，無論第一個下拉串列中的選項是什么。

目前，第二個下拉選單的默認選擇始終為空。

我嘗試從標簽和設定中獲取值types并加載它們v-for，但它也不起作用。option:selected="index===0"

演示：https ://codesandbox.io/s/relaxed-flower-2hjox1?file=/src/App.vue

模板

<div class="col-md-6">
  <label for="type" class="form-label">Type</label>
  <select id="type" class="form-select" v-model="form.type">
      <option value="en-US" selected>English (US)</option>
      <option value="en-GB">English (British)</option>
  </select>
</div>
<div class="col-md-6">
  <label for="selected" class="form-label">Option 2</label>
  <div v-if="form.type === 'en-GB'">
      <select id="selected" name="selected" class="form-select" v-model="form.selected">
          <option value="Arsenal">Arsenal</option>
          <option value="Chelsea">Chelsea</option>
          <option value="Liverpool">Liverpool</option>
      </select>
  </div>
  <div v-else-if="form.type === 'en-US'">
      <select id="selected" name="selected" class="form-select" v-model="form.selected">
          <option value="Lakers">Lakers</option>
          <option value="Bulls">Bulls</option>
          <option value="Mavericks">Mavericks</option>
      </select>
  </div>
</div>

Javascript

export default {
  name: "App",
  data() {
    return {
      form: {
        type: 'en-GB',
        selected: ''
      },
      types: {
        american: ['Lakers', 'Bulls', 'Mavericks'],
        british: ['Arsenal', 'Liverpool', 'Chelsea']
      }
    }
  },
};

uj5u.com熱心網友回復：

顯示代碼片段

const app = Vue.createApp({
  data() {
    return {
      form: {
        type: "en-GB",
        selected: "",
      },
      types: {
        american: ["Lakers", "Bulls", "Mavericks"],
        british: ["Arsenal", "Liverpool", "Chelsea"],
      },
    };
  },
  watch: {
    'form.type': {
      handler() {
        this.form.selected = this.form.type === "en-GB" ? this.types.british[0] : this.types.american[0]
      },
      immediate: true
    }
  }
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <div class="col-md-6">
    <label for="type" class="form-label">Type</label>
    <select id="type" class="form-select" v-model="form.type">
      <option value="en-US" selected>English (US)</option>
      <option value="en-GB">English (British)</option>
    </select>
  </div>
  <div class="col-md-6">
    <label for="selected" class="form-label">Option 2</label>
    <div v-if="form.type === 'en-GB'">
      <select
        id="selected"
        name="selected"
        class="form-select"
        v-model="form.selected"
      >
        <option value="Arsenal">Arsenal</option>
        <option value="Chelsea">Chelsea</option>
        <option value="Liverpool">Liverpool</option>
      </select>
    </div>
    <div v-else-if="form.type === 'en-US'">
      <select
        id="selected"
        name="selected"
        class="form-select"
        v-model="form.selected"
      >
        <option value="Lakers">Lakers</option>
        <option value="Bulls">Bulls</option>
        <option value="Mavericks">Mavericks</option>
      </select>
    </div>
  </div>
</div>

您可以創建觀察者并為第二次選擇設定默認值：

watch: {
  'form.type': {
    handler() {
      this.form.selected = this.form.type === "en-GB" ? this.types.british[0] : this.types.american[0]
    },
    immediate: true
  }
}

uj5u.com熱心網友回復：

我要做的就是將第二個下拉串列的第一個值設定為默認選擇，無論第一個下拉串列中的選項是什么。

添加一個觀察者，觀察者，form.type然后從中選擇第一個專案types

請注意，我已將americankey 更改為您使用的 key for type，然后您可以遍歷選項，如果您沒有該選項，則無論如何您都需要映射物件typeMap: {'en-US': 'american', 'en-GB': 'british' } ...types[typeMap[form.type]]

new Vue({
  el: '#app',
  data() {
    return {
      form: {
        type: 'en-GB',
        selected: ''
      },
      types: {
        'en-US': ['Lakers', 'Bulls', 'Mavericks'],
        'en-GB': ['Arsenal', 'Liverpool', 'Chelsea']
      }
    }
  },
  watch: {
    'form.type' () {
      this.form.selected = this.types[this.form.type][0]
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js"></script>

<div id="app">
  <div class="col-md-6">
    <label for="type" class="form-label">Type</label>
    <select id="type" class="form-select" v-model="form.type">
      <option value="en-US" selected>English (US)</option>
      <option value="en-GB">English (British)</option>
    </select>
  </div>
  <div class="col-md-6">
    <label for="selected" class="form-label">Option 2</label>
    <select id="selected" name="selected" class="form-select" v-model="form.selected">
      <option v-for="name in types[form.type]">{{ name }}</option>
    </select>
  </div>
</div>

標籤：javascript Vue.js 下拉式菜单 Vuejs3 惯性

上一篇：無法在JavaScipt中使用css填充框

下一篇：startsWith僅適用于第一個條件