Vue.js 中如何设置下拉菜单的默认选项？

2024-03-01 21:15:55

在 Vue.js 中设置下拉菜单中的默认选项

问题场景

在 Vue.js 中，你在编辑产品的组件中有一个下拉菜单，用于选择产品类别。你现在需要将与产品类别名称相匹配的选项作为默认选项。

解决方法

1. 安装必要的依赖

首先，你需要安装 useForm 和 defineProps 钩子函数：

npm install vue-form-create vue-router --save

2. 定义组件属性

使用 defineProps 定义 product 和 categories 属性：

const props = defineProps({
  product: {
    type: Object,
    required: true,
  },
  categories: {
    type: Array,
    required: true,
  },
});

3. 使用表单钩子

使用 useForm 钩子函数管理表单状态：

const form = useForm({
  category: '',
});

4. 在下拉菜单中使用 v-model

在 <select> 元素上使用 v-model 指令，将它绑定到表单中的 category 属性：

<select v-model="form.category">

5. 使用 v-for 和 v-selected 遍历选项

使用 v-for 遍历 categories 数组，并使用 v-selected 检查 category.name 是否等于 product.category：

<option v-for="category in categories"
  :selected="category.name == product.category">
  {{ category.name }}
</option>

完整代码

<script setup>
import { defineProps, useForm } from 'vue';

const props = defineProps({
  product: {
    type: Object,
    required: true,
  },
  categories: {
    type: Array,
    required: true,
  },
});

const form = useForm({
  category: '',
});
</script>

<template>
  <select v-model="form.category">
    <option v-for="category in categories"
      :selected="category.name == product.category">
      {{ category.name }}
    </option>
  </select>
</template>