Как добавить условие не менее 3 символов при поиске по автозаполнению?

Question

Мой шаблон такой:

<v-autocomplete
        v-model="model"
        :items="items"
        :loading="isLoading"
        :search-input.sync="search"
        chips
        clearable
        hide-details
        hide-selected
        item-text="name"
        item-value="symbol"
        label="Search for a coin..."
        solo
      >

Мой компонент такой:

watch: {
    search (val) {
      // Items have already been loaded
      if (this.items.length > 0) return

      this.isLoading = true

      // Lazily load input items
      fetch('https://api.coinmarketcap.com/v2/listings/')
        .then(res => res.json())
        .then(res => {
          this.items = res.data
        })
        .catch(err => {
          console.log(err)
        })
        .finally(() => (this.isLoading = false))
      }
  },

Мой код и демо-версия вот так:

https://codepen.io/positivethinking639/pen/GRgGJNN?editors=1010

Я пытаюсь добавить: if(val.length >= 3) { ... },

, но существует ошибка:

[Vue warn]: Error in callback for watcher "search": "TypeError: Cannot read property 'length' of null"

Как мне решить эту проблему?

Answer 1

Я не смог получить ошибку, добавляя проверку длины следующим образом:

watch: {
  ...
  search (val) {
    // Items have already been loaded
    if (this.items.length > 0) return

    if (val.length < 3) return;

    this.isLoading = true

    // Lazily load input items
    fetch('https://api.coinmarketcap.com/v2/listings/')

Если вы проверяете длину где-то еще, ошибку Cannot read property 'length' of null можно исправить, улучшив выражение следующим образом:

if (val && val.length >= 3) { ... }