v-for 中的 Buefy 自动完成

Question

我想在 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 文档，您可以通过在数据中使用 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,
      default: '',
    },
  },
  computed: {
    filteredDataArray() {
      return this.data.filter((option) => {
        return option.name.toString().toLowerCase().includes(this.userInput)
      })
    },
  },
}
</script>

Answer 1

您可以将整个 <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 传递数据。

v-for 中的 Buefy 自动完成

Buefy autocomplete in v-for

autocomplete

vue.js

v-for

buefy

nuxtjs

解决方案：