vue v-for使用踩坑点

最新推荐文章于 2025-09-11 10:29:40 发布

原创最新推荐文章于 2025-09-11 10:29:40 发布 · 538 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文探讨了在使用Vue框架进行后台编辑页面开发时，遇到的v-for循环回显问题。通过对比两种不同的v-for用法，揭示了正确实现状态回显的关键。文章详细解释了如何通过调整v-model绑定的值和label属性，使得v-for能够正确地显示预设的状态选项。

VUE v-for循环使用踩坑点

用vue写后台编辑页面用v-for遍历状态是遇到状态回显问题：

<el-form-item label="销售状态">
          <el-radio-group v-model="formData.saleStatus">
            <el-radio v-for="item in saleStatusList" :key="item.key" :value="item.name" :label="item.key"/>
          </el-radio-group>
        </el-form-item>

v-for这样使用时没法回显

<el-form-item label="销售状态">
          <el-radio-group v-model="formData.saleStatus">
            <el-radio v-for="item in saleStatusList" :key="item.key" :value="item.key" :label="parseInt(item.key)">{{ item.name }}</el-radio>
          </el-radio-group>
        </el-form-item>

当该成这样时就可以了。

在这里插入图片描述