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

【问题标题】：Vue - set v-model dynamically (with a variable containing a string)Vue - 动态设置 v-model（使用包含字符串的变量）
【发布时间】：2020-05-15 03:38:32
【问题描述】：

我无法动态设置 v-model。

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

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

但我想遍历一个我有字符串的对象，例如：'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（以便动态设置）？

【问题讨论】：

我什至不明白这会如何工作：v-model="form[filters][firstlastname]" ，不应该是：v-model="form['filters']['firstlastname']"
我猜你是对的。但即使我将其修改为：property: 'form[\'filters\'][\'firstlastname\']'，它也会被解释为字符串。我也试过 'form.filters.firstlastname' 还是一样。
是的，我知道这行不通。但如果这不是来自 api，我建议你采取不同的方法来解决这个问题。首先，我认为这不是一个好主意？
过滤器是在父级中定义的（不是来自 api）。好吧，我可以通过为我的过滤器对象中的每个字段添加一个属性名称来解决它。然后我可以说：v-model="form.filters[filter.property]"。然后所有属性都需要在“form.filters”中......我认为让它完全动态会很好，但这似乎不可能......

标签： vue.js v-model

【解决方案1】：

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

您可以使用 2 种方式访问 data inside html 模板中存在的任何属性，

直接引用属性
使用$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]] 这将引发异常

按照 cmets 中的建议，尝试不同的方法或展平对象。可以参考这个链接看看如何扁平化对象https://stackoverflow.com/a/25370536/2079271

【讨论】：

那太好了。谢谢