Vue - 动态设置 v-model （使用包含字符串的变量）

Question

我无法动态设置 v-model 。

如果我明确输入，它会起作用：

 <div class="form-group mr-3 mb-2">
     <input type="text"  
       v-model="form[filters][firstlastname]" 
     > 
</div>

但我想循环遍历一个包含 string 的对象，例如： 'form[filters][firstlastname]'

父级的表单具有以下属性：

data() {
   return {
     form: new Form({
        filters: {
        gender: [],
        firstlastname: 'My firstlastname'

因此，我从父组件将表单和过滤器传递到子组件中，这里是过滤器：

  let formFilters = { filters: [
      {
         type: 'text',
         property: 'form[filters][firstlastname]',        // <-- string 
        placeholder: 'Name',
     },
     {
        type: 'number',
        property: 'paginate', 
        placeholder: 'Max rows'
     },
   ]
}

子组件：（这里我循环遍历对象并生成输入字段）

<div v-for="(filter,index) in formFilters.filters" 
       :key="`${index}_${filter.property}`"
   >
      <input 
         v-if="filter.type === 'text' || filter.type === 'number'"
         :placeholder="filter.placeholder" 
         :type="filter.type"                
          v-model="filter.property"               //<--- set the property
     >

这是行不通的。v-model 只是将其解释为字符串，而不是对表单属性的引用。我测试了其他方法，例如：（v-model="``${[filter.property]}``"单个，不是双````，但它不会在 stackoverflow 中显示，否则）和其他疯狂的东西，但它是无效的。

那么如何使用包含字符串的变量设置 v-model （以便可以动态设置）？

Answer 1

这是一个非常棘手的问题......

您可以使用两种方式访问data​​内部 html 模板中存在的任何属性，

1. 直接引用属性
2. 使用$data

data() {
  return {
     firstlastname: 'Mr First last name'
  }
}

所以，在 html 模板中你可以使用
<p>{{firstlastname}}</p> 或者 <p>{{$data.firstlastname}}</p>

对于您的场景$data，可用于原始数据类型，如字符串或数字，

<input 
  v-if="filter.type === 'text' || filter.type === 'number'"
  :placeholder="filter.placeholder"
  :type="filter.type"
  v-model="$data[filter.property]">

但这不适用于您尝试访问对象的嵌套属性的第二种情况form.filters.firstlastname
您可以使用以下表示法访问此属性$data[form][filters][firstlastname]

在您的情况下，for循环将导致$data[form.filters.firstlastname]或$data[[form][filters][firstlastname]]将引发异常

如注释中所建议的，尝试不同的方法或压平物体。您可以参考此链接了解如何展平对象/sf/answers/1775937551/