时间戳

首页 > 解决方案 > 如何将 v-model 属性定义为动态对象？

javascript - 如何将 v-model 属性定义为动态对象？

问题描述

我正在构建一个动态表单，允许用户通过单击按钮（“adicionar condição”）添加更多字段。像打印屏幕： 在此处输入图像描述

此表单的每一行都基于以下数据：

groups: [
  {
    connective: 'and',
    conditions: [
      {
        type: 'lead_prop',
        field: 'tags',
        condition: 'has',
        value: ''
      }
    ]
  }
]

当用户按下“adicionar condição”按钮时，一个新对象被推送到条件数组，如下所示：

<v-btn @click="addCondition(i)">Adicionar condição</v-btn>

addCondition(index) {
      this.groups[index].conditions.push({
        type: 'lead_prop',
        field: 'tags',
        condition: 'has',
        value: ''
      });
    }

如您所见，我正在使用 vuetify 自动完成功能，这就是问题所在。每次我向组的条件数组中添加一个新的条件对象时，看起来自动完成组件的 v-model 是相同的。如果我更改新自动完成的值，前一个会得到相同的值，如下所示： 在此处输入图像描述

如果我更改“标签”字段，所有现有的自动完成功能也会收到该值。这就是我绑定自动完成模型的方式：

   <v-autocomplete
    v-model="g.conditions[index].value"
    :items="tags"
    :teste="index"
    :loading="isLoading"
    :search-input.sync="search"
    color="white"
    hide-no-data
    hide-selected
    item-text="tag"
    item-value="id"
    label="Tags"
    placeholder="Comece a digitar para procurar"
    prepend-icon="mdi-tag"
    return-object>

如何将每个标签自动完成字段绑定到条件数组中的对象？

这就是我迭代数据的方式：

<v-card v-for="(g, i) in groups" :key="i">
<v-row v-for="(c, index) in g.conditions" :key="index">

标签： javascriptvue.jsvuetify.jsv-model

解决方案

解决此问题的一种方法是创建一个内部具有自动完成功能的轻量级组件，然后公开属性以更改模型。

推荐阅读