如何在 Vue.js 中选择第一个选项 - JavaScript

在 Vue.js 中，我们经常需要设置一个下拉菜单或者是选择框，如果用户没有进行选择，我们可能需要将第一个选项作为默认值。本文将介绍在 Vue.js 中如何选择第一个选项。

方法一: 设置默认值

我们可以在 Vue.js 组件中设置一个 data 属性来存储选项列表，在 created 钩子中，将第一个选项作为默认值存储在 selected 属性中即可。下面是具体的代码片段：

<template>
  <div>
    <select v-model="selected">
      <option v-for="option in options" :value="option.value">
        {{ option.label }}
      </option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { label: 'Option 1', value: 'option1' },
        { label: 'Option 2', value: 'option2' },
        { label: 'Option 3', value: 'option3' }
      ],
      selected: '' // 第一个选项作为默认值
    };
  },
  created() {
    this.selected = this.options[0].value; // 将第一个选项作为默认值
  }
};
</script>

在上面的代码中，我们首先定义了选项列表 options 和 selected 属性。在 created 钩子中，我们将第一个选项的值存储在 selected 属性中。

方法二: 使用 watch 监听选项列表的变化

我们也可以使用 Vue.js 中的 watch 属性来监听选项列表的变化，如果发现选项列表已经发生了变化，我们可以将第一个选项作为默认值。下面是代码片段：

<template>
  <div>
    <select v-model="selected">
      <option v-for="option in options" :value="option.value">
        {{ option.label }}
      </option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { label: 'Option 1', value: 'option1' },
        { label: 'Option 2', value: 'option2' },
        { label: 'Option 3', value: 'option3' }
      ],
      selected: '' // 第一个选项作为默认值
    };
  },
  watch: {
    options(newVal) {
      if (newVal.length) {
        this.selected = newVal[0].value; // 将第一个选项作为默认值
      }
    }
  }
};
</script>

在上面的代码中，我们使用了 watch 属性来监听 options 属性的变化。如果 options 发生变化，我们首先检查 options 是否有任何选项，如果存在任何选项，我们将第一个选项的值存储在 selected 属性中。

总结

在 Vue.js 中，我们可以使用两种不同的方法来将第一个选项作为默认值。如果选项列表不需要经常变化，第一种方法是最常见的。如果选项列表是动态的，建议使用第二种方法来保持默认值的最新状态。