vue中v-model如何绑定多循环表达式实战案例

const arr = [
  { value: 'a' }, { value: 'b' }
]

const item {
  a: 1,
  b: 2,
  __config__:{ required: false },
}

<div>
  <van-switch v-model="item[arr[0].value]" />
  <van-switch v-model="item[arr[1].value]" />
</div>

<div
  v-for="(cell, cellKey) in arr"
  :key="cellKey"
>
  <van-switch v-model="item[cell.value]"  />
</div>

const arr = [
  { value: 'a' }, { value: '__config__.required' }
]

const item {
  a: 1,
  b: 2,
  __config__:{ required: false },
}

<div
  v-for="(cell, cellKey) in arr"
  :key="cellKey"
>
  <van-switch v-model="item[cell.value]"  />
</div>

* @description 实现 lodash 的_.get
*
* @param {Array/Object} source 目标数组/对象
* @param {String} path 获取对象的字符串路径
* @param {*} [defaultValue=undefined] 若值为空，则可传入默认值作为返回值
* @return {*} 
* @example
* const get1 = tool._get({ a: null }, "a.b.c", 3)       // output: 3
  const get2 = tool._get({ a: [{ b: 1 }] }, "a[0].b")   // output: 1
*/
_get(source, path, defaultValue = undefined) {
 // a[3].b -> a.3.b -> [a,3,b]
 // path 中也可能是数组的路径，全部转化成 . 运算符并组成数组
 const paths = path.replace(/\[(\d+)\]/g, ".$1").split(".")
 let result = source
 for (const p of paths) {
   // 注意 null 与 undefined 取属性会报错，所以使用 Object 包装一下。
   result = Object(result)[p]
   if (result == undefined) {
     return defaultValue
   }
 }
 return result
}

<div
  v-for="(cell, cellKey) in arr"
  :key="cellKey"
>
  <van-switch v-model="_get(item, cell.value)"  />
</div>

data(){
   return {
    const arr = [
      { value: 'a' }, { value: '__config__.required' }
    ]

    const item {
      a: 1,
      b: 2,
      __config__:{ required: false },
    }
   }
}

v-model‘ directives require the attribute value which is valid as LHS

<div
  v-for="(cell, cellKey) in arr"
  :key="cellKey"
>
  <van-switch v-model="getItem"  />
</div>

computed:{
    getItem(){
        return _get(this.item, 写啥)
    }
}

<van-switch v-model="getItem"  />

// 我们不能写
<van-switch v-model="getItem(item, cell.value)"  />

<div
  v-for="(cell, cellKey) in arr"
  :key="cellKey"
>
    <template v-if="cell.value1">
        <van-switch v-model="item[cell.value][cell.value1]"  />
    </template>
    <template v-else>
        <van-switch v-model="item[cell.value]" />
    </template>
</div>

data(){
   return {
    const arr = [
      { value: 'a' }, { value: '__config__', value1: 'required' }
    ]

    const item {
      a: 1,
      b: 2,
      __config__:{ required: false },
    }
   }
}

<van-switch 
  v-model="cell.value1 ? item[cell.value][cell.value1] : item[cell.value]"  
/>

<div v-for="(cell, cellKey) in arr" :key="cellKey">
    <Item :item="item" :cell="cell" />
</div>

data(){
   return {
    const arr = [
      { value: 'a' }, { value: '__config__', value1: 'required' }
    ]

    const item {
      a: 1,
      b: 2,
      __config__:{ required: false },
    }
   }
}

<div>
    <van-switch v-model="itemVal"  />
</div>

<script>
props:['item', 'cell']

computed:{
    itemVal(){
      return this.cell.value1 ? this.item[this.cell.value][this.cell.value1] : this.item[this.cell.value]
    }
  },

</script>

Computed property "itemVal" was assigned to but it has no setter.

computed:{
    itemVal:{
      get(){
        return this.cell.value1 ? this.item[this.cell.value][this.cell.value1] : this.item[this.cell.value]
      },
      set(v){
        if(this.cell.value1){
          this.item[this.cell.value][this.cell.value1] = v
        }else{
          this.item[this.cell.value] = v
        }
      }
    }
  },