Question

我正在使用网格中的列数在运行时生成动态文本字段。在下面的代码中，Object.keys（entryData）将具有列列表。当我获得item.field条件为'councilDisplay'时，我希望该特定文本字段是自动完成的，而其他文本字段应仅保留文本字段。我打算出于保存目的将数据加载到自动完成中，但此时条件是给出所有文本字段或所有自动完成。是否需要在v-text-field标签中写入条件？这是我遇到的问题。我只想将Council Display设置为自动完成。

<v-layout align-center
            v-for="(item, i) in Object.keys(entryData)"
            :key ="i"
            v-if="item.field != ''">
            <template v-if="item.field != 'councilDisplay'">
            <v-text-field
              v-model="entryData[item]"
              :label="getLabel(item)"
              :disabled="setDisable(item)"
              v-if="msgTitle != 'Do You Want To Delete Record?'">
            </v-text-field>
            </template>
            <template v-else>
              <v-autocomplete
                v-model="entryData[item]"
                :label="getLabel(item)"
                :disabled="setDisable(item)">
              </v-autocomplete>
            </template>
</v-layout>

Answer 1

我不确定这是否是原因，但我发现您有不必要的<template>标签。该标签可用于一次切换多个标签，这似乎不是必需的。

您可以只使用v-autocomplete和v-text-field

      <v-layout align-center
        v-for="(item, i) in Object.keys(entryData)"
        :key ="i"
        v-if="item.field != '' && msgTitle != 'Do You Want To Delete Record?'">

        <v-text-field
          v-if="item.field != 'councilDisplay'"
          v-model="entryData[item]"
          :label="getLabel(item)"
          :disabled="setDisable(item)"
        ></v-text-field>

        <v-autocomplete
          v-else
          v-model="entryData[item]"
          :label="getLabel(item)"
          :disabled="setDisable(item)"
        ></v-autocomplete>
      </v-layout>

如何在Vue.js中的v-textfield和v-autocomplete之间切换？

1 个答案: