javascript - v-model怎么动态绑定Vue.data的属性？

Question

new Vue({
        el: '#app',
        data: function () {
            return {
                  normal1: 1,
                  normal2: 1,
                  normal3: 1,
                  normal4: 1,
                  // normal是不确定有几个
             }
         ｝
});

FXJXM的数量跟normal的数量是一样的。请问v-for渲染el-radio-group的时候，v-model怎么绑定

               <div class="body-item" v-for="(FXJXM, index) in FXJXMS" >
                    <div class="title">
                        <div class="value">{{FXJXM.FDATAVALUE}}</div>
                        <div class="desc">{{FXJXM.FInspectionStandard}}</div>
                    </div>
                    <div class="buttom">
                        <el-radio-group v-model="" class="radio-group">
                            <el-radio :label="1">正常</el-radio>
                            <el-radio :label="2">异常</el-radio>
                        </el-radio-group>
                        <el-upload class="upload" action="https://jsonplaceholder.typicode.com/posts/" :on-change="handleChange" :file-list="fileList">
                            <el-button size="small" type="primary" class="el-icon-picture">拍照</el-button>
                        </el-upload>
                    </div>
                </div>

Answer 1

最简单的方式可以这样:

<template>
  <div>
    <div v-for="(_, index) in 4">
      <el-divider content-position="left">Form-{{index}}</el-divider>
      <el-radio-group v-model="formData[`radio${index}`]">
        <el-radio value="1" size="large">Option 1</el-radio>
        <el-radio value="2" size="large">Option 2</el-radio>
      </el-radio-group>
      <el-input v-model="formData[`input${index}`]"></el-input>
    </div>
    <div>{{ formData }}</div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const formData = ref({})
</script>

�� 在线Demo

或者

<template>
  <div>
    <div v-for="(item, index) in formData">
      <el-divider content-position="left">Form-{{index}}</el-divider>
      <el-radio-group v-model="item.radio">
        <el-radio value="1" size="large">Option 1</el-radio>
        <el-radio value="2" size="large">Option 2</el-radio>
      </el-radio-group>
      <el-input v-model="item.input"></el-input>
    </div>
    <div>{{ formData }}</div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const formData = ref(Array.from({length:4}, () => ({ radio:"", input:"" })))
</script>

�� 在线Demo2

---

但是会需要你有规律的去设置属性key或者预设好初始对象数组，所以最好的方式是你做一个自定的 FormComponent，然后通过组件 v-model 来实现双向绑定。

Answer 2

data里这么定义:

normals: []

初始化钩子的时候push进去初始值

<div class="body-item" v-for="(FXJXM, index) in FXJXMS" :key="index">
    <!-- ... -->
    <el-radio-group v-model="normals[index]" class="radio-group">
        <el-radio :label="1">正常</el-radio>
        <el-radio :label="2">异常</el-radio>
    </el-radio-group>
    <!-- ... -->
</div>