vue如何循环动态的绑定v-model

Question

如上，一个类为condition的标签里含有Calcader和Input组件，这些的v-model值都绑定了对应的变量，但我想做到循环后绑定不同的变量，而不是都是同一个，怎么办

Answer 1

利用动态组件

<div>
    <component v-for="(item, index) in children" :key="index + ''" :is="item.slot" >
    
    </component>
</div>

data () {
    return {
        chilren: [{
            slot: 'input'
        },{
            slot: 'calcader'
        }]
    }
},
components: {
    'input': Input,
    'calcader': Calcader
}

Answer 2

一个数组 xxx = [{a:''},{a:''}]，
<div v-for="(v,i) in xxx" v-model="v.a"></div>
所有数据都在xxx里了，自己看要那个时候拿那个

如果要绑定变量，可以试试这样
那你就，然后 v-model="x + i"

data () {
  return {
      x0：''，
      x1: '',
  }
}

Answer 3

关键在于不要直接使用v-for的循环值, 而是引用其他变量即可

<script setup>
import { ref } from 'vue'
import Comp from './Comp.vue'

const msg = ref('Hello World!')
const list = ref(['a','b','c'])

</script>

<template>
  <h1>{{ msg }}</h1>
  <Comp v-for="(item, index) of list" v-model:msgtest="list[index]" :key="item" />
</template>

Answer 4

循环之后，绑定动态变量，可以做到，看下这篇文章：https://blog.csdn.net/qq_2561...。

Answer 5

不用v-model,用v-bind:value="'curConditon'+$index"

Answer 6

不好意思，搞错了，我再看看，这个问题我也遇到了，不知道怎么办

Answer 7

<div v-for="v in obj/arr " v-model="v"></div>

Answer 8

见这里：https://segmentfault.com/q/10...

Answer 9

换一个思路：使用input事件，当有数据修改时，把修改数据的key和value记录到form里，提交时用form提交给后端，跟双向绑定v-model一样。

<template>
{{key}}:
<input type="text" @value="oldValue" @input="handleInput($event,key,oldValue)">
<script>

<script>
export default {
    data(){
        return{
            key:"hello",
            oldValue:"world",
            form:{
            
            }
        }
    },
    methods:{
        handleInput(newValue,key,oldValue){
            if(newValue != oldValue){
                this.form[key] = newValue
            }
        }
    }
}
</script>

Answer 10

v-model="'curConditon'+index"

Answer 11

render

Answer 12

说一下我的思路
我是在jsx中用的

            <el-input
              v-model={v.a || v.b}
            />

一开始是这样写的，编译报错
Property left of AssignmentExpression expected node to be of a type ["LVal"] but instead got "LogicalExpression"（大概意思是v-model不能用逻辑表达式）

后来改成了

function render() {
  let vmodel = v.a || v.b;
  return (
    <el-input
      v-model={vmodel}
    />

这样写的问题是，看最下边分析

后来改成了如下，就可以了

function render() {
  let vmodel = v.a ? 'a' : 'b';
  return (
    <el-input
      v-model={v[vmodel]}
    />

可以在

    <el-input
      这里边让它报个错，然后就可以在控制台跳转到编译后的渲染v-model的地方
    />


      "model": {
        value: v[vmodel],
        callback: function callback($$v) {
          _this.$set(v, vmodel, $$v);
        }



      "model": {
        value: vmodel, // vmodel是个基本数据类型，值是个字符串，修改vmodel不会影响到变量v，所以这样写不行
        callback: function callback($$v) {
          vmodel = $$v;
        }
      }