时间戳

首页 > 解决方案 > （在 nuxt js 中进行 vuetify）自动完成不是相对于 items 属性的更新

vue.js - （在 nuxt js 中进行 vuetify）自动完成不是相对于 items 属性的更新

问题描述

搜索中的每个输入我都会更新 items 道具，但 v-autocomplete 变为空，尽管我的组件中的数据发生了变化我尝试添加无过滤器道具它没有帮助我猜测反应性被破坏的东西我也尝试使用计算属性作为项目，但结果仍然相同

搜索中的每个输入我都会更新 items 道具，但 v-autocomplete 变为空，尽管我的组件中的数据发生了变化我尝试添加无过滤器道具它没有帮助我猜测反应性被破坏的东西我也尝试使用计算属性作为项目，但结果仍然相同

<script>
import ProductCartCard from "~/components/cart/ProductCartCard";

export default {
  name: "search-app",
  components: {
    ProductCartCard
  },
  props: {
    items: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      loading: false,
      filteredItems: [],
      search: null,
      select: null
    };
  },
  watch: {
    search(val) {
      if (!val || val.length == 0) {
        this.filteredItems.splice(0, this.filteredItems.length);

        return;
      } else {
        val !== this.select && this.querySelections(val);
      }
    }
  },
  methods: {
    querySelections(v) {
      this.loading = true;
      // Simulated ajax query
      setTimeout(() => {
        this.filteredItems.splice(
          0,
          this.filteredItems.length,
          ...this.items.filter(i => {
            return (i.externalName || "").toLowerCase().includes((v || "").toLowerCase());
          })
        );

        this.loading = false;
      }, 500);
    }
  }
};
</script>
<template>
  <div class="search-app-container">
    <v-autocomplete
      v-model="select"
      :loading="loading"
      :items="filteredItems"
      :search-input.sync="search"
      cache-items
      flat
      hide-no-data
      hide-details
      label="searchProduct"
      prepend-icon="mdi-database-search"
      solo-inverted
    >
      <template v-slot:item="data">
        <ProductCartCard :regularProduct="data" />
      </template>
    </v-autocomplete>
  </div>
</template>

标签： vue.jsnuxt.jsvuetify.js

解决方案

v-autocomplete如文档中所述的警告之一：

当为 items 属性使用对象时，您必须将 item-text 和 item-value 与对象上的现有属性相关联。这些值默认为 text 和 value 并且可以更改。

这可能会解决您的问题

推荐阅读