动态Vuetify文本框或根据数组值选择

Question

我正在开发一个模式表单，它将显示许多v-select或v-text-field。。。然而，这些元素的数量和类型是从数据库中提取的，这意味着创建元素的vuetify代码需要是动态的。首先，我有一个json对象，它是从描述每个输入元素的数据库返回的。如果输入是v-select，则名为InputType的json属性设置为"Combobox"。如果是v-text-field，则InputType设置为"Textbox"。这是一个样品。

{
tags: [
{
TagDefinitionId: '1',
InputType: 'Combobox',
Name: 'Tag1',
TagValueOptions: [
{
Value: 'Option 1',
},
{
Value: 'Option 2',
},
{
Value: 'Option 3',
},
],
},
{
TagDefinitionId: '2',
InputType: 'Textbox',
Name: 'Project Name',
TagValueOptions: [],
},
],
}

然后，我使用vuex将模态中的状态映射到名为documentTags的值。

<script>
import { mapState } from 'vuex';
export default {
name: 'MyModal',
computed: {
...mapState(['documentTags']),
},
};
</script>

现在，在我的模态vuetify模板中，我知道如何为documentTags数组中的元素数量创建单独的列。我可以这样做：

<template>
<v-dialog v-model="show" max-width="600px">
<v-row>
<v-col
v-for="n in this.documentTags.tags.length"
:key="n"
cols="18"
sm="8"
md="6"
>
<v-card class="pa-2" outlined tile>
This v-card needs to be replaced with a v-select or v-text-field
</v-card>
</v-col>
</v-row>
</v-dialog>
</template>

然而，我真的不知道如何遍历我的documentTags数组，并使用Vue和/或Vuetify语法确定哪个元素(即v-select或v-text-field(需要放置在适当的列中。有人能为如何做到这一点提供指导吗？

更新

所以，我根据Leonardo的建议更新了我的代码(这很有效(，但现在我遇到了一个问题。我不知道如何将标记Name分配给每个输入对象的标签。我想我可以试试类似"标签.名称"的东西，但那不起作用。有什么想法吗？

<template>
<v-dialog v-model="show" max-width="600px">
<v-row>
<v-col
v-for="tag in this.documentTags.tags"
:key="tag.TagDefinitionId"
cols="18"
sm="8"
md="6"
>
<v-select
v-if="tag.InputType === 'Combobox'"
:items="tag.TagValueOptions"
item-text="Value"
label="tag.Name"
required
>
</v-select>
<v-text-field
v-else-if="tag.InputType === 'Textbox'"
label="tag.Name"
required
>
</v-text-field>
</v-col>
</v-row>
</v-dialog>
</template>

更新2

有人知道如何从v-select或v-text-field访问值吗？因为这些元素是动态创建的？通常，我会使用类似于v-model="name">，然后在数据道具部分内声明名称属性。。。然而，我不太确定在这种情况下该怎么做。理想情况下，我希望将输入打包到一个JSON对象中，该对象带有标记名及其值。所以，像这样的例子(假设我们在这个场景中有两个标签(。

"userDocumentTags": [{
"Name": "Project Name",
"Value": "My Project Name"
},{
"Name": "Project Number",
"Value": "0001"
}
]

我想我可以通过这样做来绑定房产：

<v-select
v-if="tag.InputType === 'Combobox'"
:v-model="tag.Name"
:items="tag.TagValueOptions"
item-text="Value"
label="tag.Name"
required
></v-select>

在我的数据道具部分，我有这样的东西：

data: () => ({
userDocumentTags: [],   
}),

但是，我不知道如何将名称和值对推送到userDocumentTags对象中。有人能在这里提供指导吗？

Answer 1

您可以尝试以下操作：

<template>
<v-dialog v-model="show" max-width="600px">
<v-row>
<v-col
v-for="tag in this.documentTags.tags"
:key="tag.TagDefinitionId"
cols="18"
sm="8"
md="6"
>
<v-select v-if="tag.InputType === 'Combobox'">
// you can customize this v-select
</v-select>
<v-text-field v-else-if="tag.InputType === 'Textbox'">
// you can customize this v-text-field
</v-text-field>
</v-col>
</v-row>
</v-dialog>
</template>

更新：

嘿，伙计，关于你的新疑问，在vue.js中，当你需要传递一个变量作为属性时，你应该使用:attribute="var"。

查看一些示例：

label="tag.Name" // label is equal a string "tag.Name"
label="7" // label is equal a string "7"
:label="tag.Name" // label is equal a value of tag.Name
:label="7" // label is equal a number 7

在您的情况下，将label="tag.Name"切换为:label="tag.Name"。

还有一件事在模板中，不需要使用指令this来访问数据值。在for语句中，尝试使用v-for="tag in documentTags.tags"

更新2

如果你想应用"；实时"；对于所有应用程序，您都可以使用以下方式：
https://vuex.vuejs.org/guide/forms.html#form-处理

您将创建一个突变方法来更新vuex数据，并使用input或change事件来调用此突变方法。

否则，如果您只想在用户按下保存按钮后应用更改(例如(，则不能将documentTags用作计算数据。您需要将documentTags值复制到本地数据userDocumentTags中。我想你可以在mounted挂钩中这样做：

mounted() {
this.userDocumentTags = [...this.$store.getters['documentTags']];
}

不幸的是，我无法在我的机器中重现这个例子，所以我不确定它是否有效。也许你应该提出一个新的问题，询问具体解决这个新问题的最佳方法是什么。