如何访问用户在 VueJS 的这些 v-text-fields 中输入的数据？

Posted 2023-02-22

【中文标题】如何访问用户在 VueJS 的这些 v-text-fields 中输入的数据？

【英文标题】：How can I get access to the data entered by the user in these v-text-fields in VueJS?

【发布时间】：2019-12-18 09:01:49

【问题描述】：

我有一个名为reducedGroups的数组。 为了响应下面的 Javas commetn，我重新构造了这个数组，使它现在是一个对象数组，包含的对象的数量总是不同的。

它可能看起来像这样：

[ 
 "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>

这个的输出如下所示。

我有两个问题：

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

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

更新：针对 Java 重构数据

【问题讨论】：

你能改变你的数据结构以使用对象数组，而不是数组数组吗？如果是，那么写一个答案会容易得多。

我已经对数据进行了重组，现在它使用了一个对象数组。我已更新问题以显示新的数据结构。

【参考方案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>

已编辑添加

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

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

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

【讨论】：

不错的答案，我想这会奏效。对于他的第一个问题，您可以将v-if="group.name" 添加到<v-btn /> 元素中。

这几乎做到了，但我仍然有一个问题 - 在现在重命名空组的情况下 - 似乎我只能访问初始

另一个问题是——我不能使用v-if="group.name"，因为这样名字会立即出现——我想等到所有组都有名字。我希望也许 group.name （对于每个组）可以传递到一个数组中？然后我可以等到 newArr.length === 2 什么的