Vue3中读取JSON文件数据并访问对象属性渲染列表的问题

核心错误点 #

• 嵌套数组冗余包裹：导入的languages本身就是数组结构，你用ref([languages])额外套了一层数组，导致allLangauges变成[[{...}, {...}]]的嵌套结构，遍历的时候拿到的是整个语言数组而非单个语言对象。
• 遍历对象与属性访问错误：模板中遍历allLangauges时，每个循环项是内层的完整语言数组，而非单个语言对象，自然无法通过name.name获取语言名称；同时变量名name容易和对象属性混淆，语义不清晰。
• 无效的key值：JSON数据里不存在id字段，用name.id作为:key会导致key值为undefined，违反Vue对key唯一性的要求。
• 表单元素未正确绑定：checkbox的id、value等属性未关联语言数据，无法正确记录选中状态或获取选中值。

修正后的代码 #

Script 部分 #

<script setup>
import { ref } from "vue";
import languages from '@/store/languages.json'
// 直接将原数组传入ref，无需额外包裹数组
const allLanguages = ref(languages)
</script>

Template 部分 #

<div class="selectLanguageWrap relative" v-if="fields.searching">
    <div class="selectLanguages absolute">
        <div
            v-for="language in allLanguages"
            :key="language.code"
            class="languageOption flex"
        >
            <input 
                type="checkbox" 
                :id="`lang-${language.code}`" 
                :value="language.code" 
                :name="language.name"
            />
            <label :for="`lang-${language.code}`">
                <h4>{{ language.name }}</h4>
            </label>
        </div>
    </div>
</div>

修正说明 #

1. 移除ref的数组包裹，让allLanguages直接指向导入的语言数组，解决嵌套问题；
2. 将遍历变量改为language，清晰指代单个语言对象，直接通过language.name访问语言名称；
3. 使用language.code作为:key，利用code的唯一性满足Vue的key要求；
4. 给checkbox绑定了唯一的id和对应的label，提升页面可访问性，同时关联了正确的value和name属性。

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