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

我无法动态设置v-model

如果我显式键入：

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

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

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

让formFilters={filters:[
{
键入：“文本”，
属性：“form[filters][firstlastname]”，//这是一个非常棘手的问题……


您可以使用两种方式访问html模板内的
数据中的任何属性，

直接指财产
使用
$data
data（）{
返回{
姓氏：“姓氏先生”
}
}

因此，在html模板中，您可以使用
{{firstlastname}


或

{{$data.firstlastname}

对于您的场景，
$data
可用于字符串或数字等基本数据类型，




但这不适用于第二种情况，即尝试访问对象的嵌套属性
form.filters.firstlastname


您可以使用以下符号访问此属性
$data[form][filters][firstlastname]



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


按照评论中的建议，尝试不同的方法或展平对象。您可以参考此链接了解如何展平对象
我甚至不知道这将如何工作：
v-model=“form[filters][firstlastname]”
，应该是吗：
v-model=“form['filters']['firstlastname]”
我想你是对的。但即使我将其修改为：
属性：'form[\'filters\'][\'firstlastname\']“
，它被解释为一个字符串。我也尝试过”form.filters.firstlastname“，它是一样的。是的，我知道它不起作用。但是如果这不是来自api，我建议你采取不同的方法来解决这个问题。我认为这在一开始不是一个好主意？过滤器是在父级中定义的（不是来自api）。好吧，我可以通过为我的filters对象中的每个字段添加一个属性名来解决这个问题。然后我可以说：v-model=“form.filters[filter.property]”。然后所有属性都必须是“form.filters”…我想让它完全动态会很好，但这似乎是不可能的。那太好了。谢谢
  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
     >