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

Question

示例代码如下：

<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的属性，但是这样不生效，请问各位大佬有什么解决办法？

Answer 1

在 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 都会绑定到正确的路径上。