我有一个名为 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 重构数据
最佳答案
即使在重构为对象之后,我也不确定您的数据结构是否适合该模型。看起来你真正拥有的是一组组。每个组都有 (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 教程可能会对您有所帮助。
关于javascript - 我怎样才能访问用户在 VueJS 的这些 v-text-fields 中输入的数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57450059/