vue.js - Vuetify v-autocomplete 有问题

Question

我在 laravel 项目中使用 vuetify.js。我创建了这样的 [station][verhicle][take a time] 表格。

它的简单形式。但是...站选择框使用了v-autocomplete组件。所以看起来输入标签是这样自动嵌入的。

这个输入标签是不必要的。我希望返回一个数组。

有什么好办法吗？谢谢你

<template>
  <v-container>
    <v-row dense>
      <v-col sm="4">
        <v-autocomplete
          v-model="StationModel"
          :items="stationsSon"
          :search-input.sync="search"
          item-text="name"
          item-value="id"
          name="station_id[]"
          label="station"
          clearable
          hide-details
          hide-selected
          outlined
        >

          <template v-slot:selection="{ item,selected }">
            <span>{{ item.routell_name + item.name }}</span>
          </template>

          <template v-slot:item="{ item }">
            <v-list-item-content>
              <v-list-item-title v-text="item.name"></v-list-item-title>
              <v-list-item-subtitle v-text="item.routell_name"></v-list-item-subtitle>
            </v-list-item-content>
          </template>

        </v-autocomplete>
      </v-col>
    
      <v-col sm="4">
        <v-select
          name="verhicle_id[]"
          :items="verhiclesSon"
          item-value="id"
          item-text="name"
          label="verhicle"
          outlined
          clearable
        >
      </v-select>
      </v-col>
      
      <v-col sm="4">
        <v-text-field
          name="take_time[]"
          type="number"
          :rules="[v => v && v.length <= 2 || 'Warn:2 charactor']"
          label="take a time"
          outlined
        >
        </v-text-field>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
  export default {

    data: () => ({

      stationsDefault: [],
      StationModel: null,
      search: null,
      tab: null,

    }),

    watch: {
      model (val) {
        if (val != null) this.tab = 0;
        else this.tab = null;
      },
      search (val) {
        if (this.stationsDefault.length > 0) return;
      },
    },

    props:{
      stationsSon:{
        type: Array
      },
      verhiclesSon:{
        type: Array
      },
    },


    methods:{
      snipeDown: function(){
        const target = document.getElementsByClassName('v-select__selections');
        document.removeChild(target("input"));
      }
    },

  };
</script>

标签： vue.jsvuetify.js