Автозаполнение Buefy в v-for

Я хочу добавить компонент автозаполнения buefy итеративно, используя v-for в NuxtJS. Следуя документации 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>

vue.js autocomplete buefy nuxtjs v-for
person Fabio Magarelli    schedule 19.01.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете поместить весь <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>

Не забудьте передать данные через реквизит вашего дочернего компонента.

person studio-pj    schedule 19.01.2021