Petite-Vue中v-for循环无法绑定v-model问题求助

你的核心问题有两个：

1. v-model绑定对象错误：你在items数组里给每个item的model赋值为字符串"same_model"，这意味着v-model="item.model"绑定的是item对象自身的model属性（值是字符串），而不是你在全局定义的same_model变量。
2. Radio组未正确分组：当前每个radio的name属性用item.title，导致每个radio属于独立的组，无法实现单选互斥的效果。

步骤1：修正数据结构与绑定逻辑 #

不需要在items里存储model字段，直接让所有radio的v-model绑定到全局的same_model，同时统一name属性保证分组：

修改form.js的items定义：

const items = [{ title: "Item 1" }, { title: "Item 2" }]
// 保留其他代码不变

步骤2：调整模板中的绑定与属性 #

修改index.html里的模板部分，统一v-model和name：

<template id="radio-template" v-for="(item, i) in items">
    <label :for="`radio-${i}`">{{item.title}}</label>
    <input type="radio" v-model="same_model" :value="item.title" :name="`radio-group`" :id="`radio-${i}`">
</template>

完整修正后的代码 #

form.js

import { createApp } from 'https://unpkg.com/petite-vue?module'

const items = [{ title: "Item 1" }, { title: "Item 2" }]
const data = { test: "testovaci" }

function Radio() {
    return {
        $template: '#radio-template'
    }
}
const same_model = ""

createApp({
    Radio,
    items,
    data,
    same_model
}).mount();

index.html

...

<body>
    <script type="module" src="./form.js"></script>
    <div id="formular" v-scope>
        <template id="radio-template" v-for="(item, i) in items">
            <label :for="`radio-${i}`">{{item.title}}</label>
            <input type="radio" v-model="same_model" :value="item.title" :name="`radio-group`" :id="`radio-${i}`">
        </template>
        <div v-scope="Radio"></div>
        <pre>{{same_model}}</pre>
    </div>
</body>

...

关键说明 #

• 所有radio绑定同一个same_model变量，选中某个radio时，same_model会被赋值为对应的item.title，可通过<pre>{{same_model}}</pre>查看实时变化。
• 统一name="radio-group"确保这些radio属于同一组，实现单选互斥。
• 用radio-${i}生成唯一id，保证label和input的关联正确。

内容的提问来源于stack exchange，提问作者Robert Hošták