Vue3中如何根据对象数组动态设置Select的选中项

核心问题分析 #

你的代码存在三个关键问题，导致默认选中失效：

• 所有<select>绑定了同一个form.categorie，多个下拉框共用一个模型，无法独立对应每个line的选中状态
• <option>的:value绑定的是value.id（数字类型），但line.categorie存储的是分类名称（字符串，比如"foo"），值和类型都不匹配
• Vue中v-model会自动控制选中状态，手动设置:selected会被v-model覆盖，两者不能混用

解决方案 #

根据你的数据结构，提供两种可行方案：

方案1：直接绑定分类名称（适合不想修改line结构的场景）

修改<option>的:value为分类名称，同时给每个<select>绑定当前line的categorie作为独立模型：

<div v-for="line in lines" :key="line.id">
    <select v-model="line.categorie">
        <option
            v-for="value in categories"
            :key="value.id"
            :value="value.intitule"
        >
            {{ value.intitule }}
        </option>
    </select>
</div>

方案2：绑定分类ID（更规范的后端交互场景）

如果希望存储的是分类ID而非名称，先把line.categorie转换成对应的分类ID，再绑定到v-model：

<template>
    <div v-for="line in lines" :key="line.id">
        <select v-model="line.categorieId">
            <option
                v-for="value in categories"
                :key="value.id"
                :value="value.id"
            >
                {{ value.intitule }}
            </option>
        </select>
    </div>
</template>

<script setup>
import { computed } from 'vue'
import { useStore } from 'pinia'

const store = useStore()
const categories = store.categories

// 给每个line添加对应的分类ID（也可以在数据初始化时处理）
const lines = computed(() => {
    return store.lines.map(line => ({
        ...line,
        categorieId: categories.find(c => c.intitule === line.categorie)?.id || ''
    }))
})
</script>

为什么之前的尝试无效 #

• :selected="line.categorie"：v-model存在时，该属性会被Vue忽略，且line.categorie是字符串，option的value是数字，值不匹配
• :selected="categories.intitule === line.categorie"：categories是数组，categories.intitule是undefined，判断永远为false
• :selected="footoo"：没有加引号的话是变量，Vue找不到该变量；加引号后是字符串，但option的value是数字，类型不匹配

内容的提问来源于stack exchange，提问作者thiebo