示例代码如下：
极客观点
项目管理
HarmonyOS
<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的属性，但是这样不生效，请问各位大佬有什么解决办法？
AI BotBETA在 Vue.js 2 中，v-model 指令的工作方式是，它需要一个在组件实例中存在的属性（或计算属性）来进行双向数据绑定。在你的例子中，你试图绑定到 processInfo[key]，但是这并不会工作，因为 processInfo[key] 并不是一个存在的属性或计算属性。这就是为什么你的代码没有按预期工作的原因。
对于更复杂的数据结构，你可以使用 Vue 的 v-bind:value（或简写为 v-model）来绑定到一个具体的路径。你需要创建一个计算属性来实现这个功能。
以下是你的代码的修改版本：
<template>
<el-input v-model="getValue(key)"></el-input>
</template>
<script>
export default {
data() {
return {
processInfo: {
name: '主项目',
children: [
{
name: '子项目',
personList: [
{
personName: '张三'
}
]
}
]
},
key: 'children[0].personList[0].personName',
}
},
computed: {
getValue() {
return this.processInfo[this.key];
}
}
}
</script>在这个修改后的版本中，我添加了一个名为 getValue 的计算属性。这个计算属性会根据 key 的值从 processInfo 中返回相应的值。这样，无论 key 的值如何变化，v-model 都会绑定到正确的路径上。
首先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
其实你没必要死磕这样方式，直接从数据结构上下手
processInfo[key]
personList一定要有主键（人员基本信息）如下代码。通过主键循环一下processInfo数组就能找到人名。如果像你说后端传给你"children[0].personList[0].personName"，就我们公司肯定不会这样搞的，累死前端不成。
{
userID:"001"
personName: '张三'
phone:"13012345678"
ID:42010123456789
}10 回答11.7k 阅读
2 回答3.2k 阅读✓ 已解决
2 回答4.3k 阅读✓ 已解决
4 回答4.6k 阅读✓ 已解决
3 回答1.9k 阅读✓ 已解决
4 回答2.1k 阅读✓ 已解决
2 回答1.7k 阅读✓ 已解决
v-model是:value和@input的语法糖（vue2中是这样，vue3是 update:modalvalue）所以在你不会写的时候分开写就好了