vue2中v-model绑定的属性为动态的，请问应该如何绑定？

  • Z时代
  • 2024-03-03
  • 分类：IT

示例代码如下：

<template>
  <el-input v-model='processInfo[key]'></el-input>
</template>
<script>
export default {
  data() {
    return {
      processInfo: {
        name: '主项目',
        children: [
          {
            name: '子项目',
            personList: [
              {
                personName: '张三'
              }
            ]
          }
        ]
      }，
      key: 'children[0].personList[0].personName',
    }
  }
}
</script>

我想通过key动态的绑定processInfo的属性，但是这样不生效，请问各位大佬有什么解决办法？

回答：

v-model 是 :value 和 @input 的语法糖（vue2中是这样，vue3是 update:modalvalue）

所以在你不会写的时候分开写就好了

回答：

不用双向绑定 取值和赋值自己处理一下

回答：

首先processInfo[key]，这个语法是获取不到值的

https://www.lodashjs.com/docs/lodash.get
https://codepen.io/rhdom/pen/rNPoewJ

这样写能获取到值，但是写入的时候有问题
关键问题是vue的编译不对

你看编译后的代码

(function anonymous() {
    with (this) {
        return _c('div', {
            attrs: {
                "id": "app"
            }
        }, [_c('el-input', {
            attrs: {
                "placeholder": 请输入内容
            },
            model: {
                value: (_.get(processInfo, key)),
                callback: function($$v) {
                    $set(_, "get(processInfo, key)", $$v)//这里明显是不对的
                },
                expression: "_.get(processInfo, key)"
            }
        })], 1)
    }
}
)

所以，调试了半天，弄好了。关键是理解到vue的$set

https://codepen.io/rhdom/pen/mdvaPxd

回答：

其实你没必要死磕这样方式，直接从数据结构上下手

processInfo[key]

personList一定要有主键（人员基本信息）如下代码。通过主键循环一下processInfo数组就能找到人名。如果像你说后端传给你"children[0].personList[0].personName"，就我们公司肯定不会这样搞的，累死前端不成。

{
      userID:"001"
    personName: '张三'
    phone:"13012345678"
    ID:42010123456789
}

以上是 vue2中v-model绑定的属性为动态的，请问应该如何绑定？ 的全部内容， 来源链接： utcz.com/p/935203.html

回到顶部