[英]How can I get access to the data entered by the user in these v-text-fields in VueJS?
I have an array called reducedGroups
. 我有一个名为reducedGroups
的数组。
In response to Javas commetn below I have restructured this array so that it is now an Array of Objects, the number of Objects contained will always differ. 为了响应下面的Java commetn,我已经对该数组进行了重组,以使其现在成为对象数组,其中包含的对象数将始终不同。
It may look something like this: 它可能看起来像这样:
[
{ "0": { "value": "ccc" }, "1": { "value": "aaa" }, "2": { "value": "ddd" }, "3": { "value": "bbb" } },
{ "0": { "value": "eeee" } },
{ "0": { "value": "fff" } },
{ "0": { "value": "ggg" } }
]
The code below arranges the internal arrays into groups and a Vuetify Text Field is shown above which allows the user to name each group. 下面的代码将内部数组分成几组,上面显示了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>
The output of this is shown below. 其输出如下所示。
I have 2 questions: 我有两个问题:
1) How can I know when the user has given each group a name? 1)我怎么知道用户何时给每个组命名? - this will be used to trigger the trash cans to appear on screen -这将用于触发垃圾桶出现在屏幕上
2) How can I then get access to the names of the groups that have been given by the user? 2)然后如何获得用户给定的组的名称? - Once the user has removed the least relevant groups and just 3 remain, I want to print to screen the names of the remaining groups. -一旦用户删除了最不相关的组,而只剩下3个,我想打印以筛选其余组的名称。
UPDATE: Restructured the data in response to Javas 更新:重组数据以响应Java
I'm not sure your data structure is appropriate for the model, even after refactoring into objects. 我不确定您的数据结构是否适合该模型,即使在重构为对象之后也是如此。 It seems like what you really have is an array of groups. 看来您真正拥有的是一组小组。 And each group has (a) a name (initially empty), and (b) an array of values. 每个组都有(a)一个名称(最初为空)和(b)一个值数组。 If that's the case, a natural structure for your data would be something like 如果是这样,您的数据的自然结构将类似于
[
{ name: "", values: ["ccc", "aaa", "ddd", "bbb"] },
{ name: "", values: ["eeee"] },
{ name: "", values: ["fff"] },
{ name: "", values: ["ggg"] }
]
With that structure, the template becomes more straightforward. 通过这种结构,模板变得更加简单。 (I don't know the details of <v-text-field />
but assuming it's the same as a standard <textarea />
: (我不知道<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>
Edited to Add 编辑添加
In response to the comments, use computed properties to extract the names and to check for any empty 作为对评论的回应,请使用计算所得的属性来提取名称并检查是否为空
computed: {
groupNames() {
return reducedGroups.map(group => group.name);
},
allNamesPresent() {
return reducedGroups.every(group => group.name);
}
}
I might also suggest that working through a basic online Vue tutorial might be helpful to you. 我可能还会建议您通过基本的在线Vue教程对您有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.