javascript - 我怎样才能访问用户在 VueJS 的这些 v-text-fields 中输入的数据？

Question

我有一个名为 reducedGroups 的数组。
为了响应下面的 Java 评论，我重组了这个数组，使其现在成为一个对象数组，包含的对象数量始终不同。

它可能看起来像这样:

[ 
{ "0": { "value": "ccc" }, "1": { "value": "aaa" }, "2": { "value": "ddd" }, "3": { "value": "bbb" } }, 
{ "0": { "value": "eeee" } }, 
{ "0": { "value": "fff" } }, 
{ "0": { "value": "ggg" } } 
]

下面的代码将内部数组排列成组，上面显示了一个 Vuetify 文本字段，允许用户命名每个组。

<div v-for="(group, index) in reducedGroups" :key="index">
    <v-flex>
      <v-text-field label="Group Name" />
      <div
        v-for="item in group"
        :key="item.value"
      >{{ item.value}}</div>
      <div>
      <v-btn icon color="error" @click="removeGroup(index)">
        <v-icon>mdi-trash-can</v-icon>
      </v-btn>
      </div>
   </v-flex>
</div>

其输出如下所示。

我有 2 个问题:

1) 我如何知道用户何时为每个组指定了名称？ - 这将用于触发垃圾桶出现在屏幕上

2) 我如何才能访问用户指定的组的名称？ - 一旦用户删除了最不相关的组并且只剩下 3 个组，我想打印以筛选剩余组的名称。

更新:根据 Java 重构数据

Answer 1

即使在重构为对象之后，我也不确定您的数据结构是否适合该模型。看起来你真正拥有的是一组组。每个组都有 (a) 一个名称(最初为空)和 (b) 一个值数组。如果是这样的话，您的数据的自然结构将类似于

[ 
  { name: "", values: ["ccc", "aaa", "ddd", "bbb"] }, 
  { name: "", values: ["eeee"] }, 
  { name: "", values: ["fff"] }, 
  { name: "", values: ["ggg"] } 
]

采用这种结构，模板变得更加简单。 (我不知道 <v-text-field /> 的详细信息，但假设它与标准 <textarea /> 相同:

<div v-for="(group, index) in reducedGroups" :key="index">
    <v-flex>
      <v-text-field label="Group Name" v-model="group.name"/>
      <div
        v-for="value in group.values"
        :key="value"
      >{{value}}</div>
      <div>
      <v-btn icon color="error" @click="removeGroup(index)">
        <v-icon>mdi-trash-can</v-icon>
      </v-btn>
      </div>
   </v-flex>
</div>

已编辑添加

为了响应评论，使用计算属性来提取名称并检查是否有空

computed: {
    groupNames() {
        return reducedGroups.map(group => group.name);
    },
    allNamesPresent() {
        return reducedGroups.every(group => group.name);
    }
}

我还建议学习基本的在线 Vue 教程可能会对您有所帮助。