v-for 中的 Buefy 自动完成

问题描述

我想在 NuxtJS 中使用 v-for 迭代添加一个 buefy 自动完成组件。 遵循 Buefy 文档：https://buefy.org/documentation/autocomplete/ 我最终来到这里：

         <div
            v-for="(composition,index) in food_composition"
            :key="composition.id"
            class="Box"
          >
            <b-field>
              <b-autocomplete
                <!-- What goes in the v-model? -->
                v-model="composition.nutrient.name"
                placeholder="Nutrient name"
                icon="magnify"
                :data="filterednutrientArray"
                field="name"
                clearable
                @select="(option) => (selected = option)"
              >
              </b-autocomplete>
            </b-field>
          </div>

过滤后的营养数组是：

filterednutrientArray() {
      return this.groups.filter((option) => {
        return option.name.toString().toLowerCase().includes(????)
      })
    },

根据 buefy 文档，您可以通过在数据中使用 as v-model 变量来构建自动完成功能；那么您的过滤数组 (filterednutrientArray) 将查看在可能对象的数组中是否有一些与您的输入相匹配。但是，如果您将自动完成功能置于 v-for 循环中，您如何跟踪用户输入？

解决方案：

（根据 pj_studio 的回答）：

我创建了一个新组件：

<!-- eslint-disable vue/no-mutating-props -->
<template>
  <b-field>
    <b-autocomplete
      v-model="userInput"
      :placeholder="placeholder"
      icon="magnify"
      :data="filteredDataArray"
      :field="field"
      clearable
      @select="(option) => (selected = option)"
    >
    </b-autocomplete>
  </b-field>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,required: true,},placeholder: {
      type: String,default: '',field: {
      type: String,default: 'name',userInput: {
      type: String,computed: {
    filteredDataArray() {
      return this.data.filter((option) => {
        return option.name.toString().toLowerCase().includes(this.userInput)
      })
    },}
</script>

解决方法

您可以将整个 <b-field></b-field> 包装在子组件中，例如 foodCompositionAutocomplete.vue。

然后在这个子组件中，您可以通过以下方式跟踪用户输入：

<template>
    <b-field>
        <b-autocomplete
            v-model="userInput"
            :data="data">
        </b-autocomplete>
    </b-field>
</template>
<script>
    export default {
        props: ['data'],data() {
            return {
                userInput: ''
            };
        },...
    }
</script>

不要忘记通过子组件上的 prop 传递数据。