Vuetify：v-autocomplete的搜索输入支持取消输入

Question

我正在将自定义组件用作export class AppComponent { myForm: FormGroup; constructor() { this.myForm = new FormGroup({ highScore: new FormControl(0, [this.lowerThan('lowScore')]), lowScore: new FormControl(0, null) }); } lowerThan(field_name): ValidatorFn { return (control: AbstractControl): { [key: string]: any } => { const input = control.value; const isLower = control.root.value[field_name] >= input; return isLower ? {'lowerThan': {isLower}}: null; }; } } 的单元格。该组件（v-data-table）使用的是简单的ArticleCell。 当我尝试输入v-autocomplete时，就像输入文字一样，由于某种原因，输入之后会立即被删除，因此好像根本没有输入。我也可以在调试中看到它。 输入似乎在Vue的ArticleCell函数中被取消。

我不知道为什么会这样。

这是v数据表：

flushSchedulerQueue()

import ArticleCell from './ArticleCell'
import saleables from '../store/modules/saleables'

export default {
  props: ['passedOrder'],

  components: {
    ArticleCell
  },

  data: function () {
    return {
      // dialog: false,
      headers: [
        { text: 'Object', align: 'left', sortable: false, value: 'object' },
        { text: 'Description', sortable: false, value: 'description' },
        { text: 'Quantity', sortable: false, value: 'quantity' }
      ],
      order: this.passedOrder ? this.passedOrder : [],
      tableCells: [],
      emptyLine: {
        object: null,
        description: null,
        quantity: null
      }
    }
  },

  mounted () {
    this.order = [
      ...this.order,
      Object.assign({}, this.emptyLine),
      Object.assign({}, this.emptyLine)
    ]
  },

  methods: {
    updateRow: function (object, item) {
      console.log('aggiorno la riga:', object)
      this.$nextTick(() => {
        if (!object) return
        item.description = object.name
      })
    },

    focusNext: [...]

    rowIsEmpty: [...]
  },

  computed: {
    saleables: function () {
      return this.$store.getters['saleables/items']
    }
  },

  watch: {
    order: {
      handler: function (l) {
        this.$nextTick(() => {
          console.log('order: ')
          if (!this.rowIsEmpty(l.length - 1)) {
            this.order.push(
              Object.assign({}, this.emptyLine),
              Object.assign({}, this.emptyLine)
            )
          }
          if (!this.rowIsEmpty(l.length - 2)) {
            this.order.push(Object.assign({}, this.emptyLine))
          }
          this.tableCells = [].slice.call(document.querySelectorAll('.table-cell input'))
        })
      },
      deep: true
    }
  }
}

这是ArticleCell：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
  <v-data-table
    :headers="headers"
    :items="order"
    class="elevation-1"
    hide-default-footer
    dense
  >
    <template #item.object="{ item }">
      <ArticleCell
        class="table-cell table-cell--flow"
        @selected="updateRow($event, item)"
        @keyup_enter="focusNext($event.target)"
        :source="saleables"
        :select="item.object"
      ></ArticleCell>
    </template>
    <template #item.description="{ item }">
      <v-text-field
        v-model="item.description"
        class="table-cell"
        hide-details
        @focus="$event.target.select()"
        @keyup.enter="focusNext($event.target)"
      ></v-text-field>
    </template>
    <template #item.quantity="{ item }">
      <v-text-field
        v-model="item.quantity"
        class="table-cell table-cell--flow"
        hide-details
        @focus="$event.target.select()"
        @keyup.enter="focusNext($event.target)"
      ></v-text-field>
    </template>
  </v-data-table>
</template>

export default {
  name: 'article-cell',
  props: ['source', 'select'],

  data () {
    return {
      searchInput: null,
      model: this.select,
      focused: false,
      items: this.source
    }
  },

  methods: {
    unfocus: function (event) {
      console.log('->unfocus')
      this.focused = false
      this.$emit('keyup_enter', event)
    },

    focus: function (event) {
      this.focused = true
      event.target.select()
    },

    querySelections: function (v) {
      this.items = (this.menuAvailable && v)
        ? this.source.filter(e => ((e.name || '').toLocaleLowerCase().indexOf((v || '').toLocaleLowerCase()) > -1))
        : []
    },

    menuAvailable: function () {
      console.log('->menuAvailable')
      return this.focused && this.searchInput && this.searchInput.length > 0
    }
  },

  watch: {
    searchInput: function (val) {
      console.log('searchInput changed: ', val)
      this.querySelections(val)
    }
  }
}