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

Question

我在网格中使用列数在运行时生成动态文本字段。在下面的代码中 Object.keys(entryData) 将包含列列表。当我将 item.field 条件设为“councilDisplay”时，我希望该特定文本字段能够自动完成，而其他文本字段应仅保留文本字段。我计划将数据加载到自动完成中以进行保存，但此时条件是提供所有文本字段或所有自动完成。我需要在 v-text-field 标签中写下条件吗？这是我遇到的问题。我只想将委员会显示作为自动完成。

<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-autocompleteandv-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>