При вводе тега Vue2 попытка отобразить имя тега из объекта тега в автозаполнении - PullRequest
Новая
       155

При вводе тега Vue2 попытка отобразить имя тега из объекта тега в автозаполнении

0 голосов
/ 29 мая 2020

У меня есть компонент Vue с вводом тега, в котором я вызываю ajax в базу данных для получения предложений по мере ввода пользователем. Для этого я использую @ johmun / vue -tags-input . Все работает нормально, за исключением того, что вместо параметров автозаполнения списка, включающих только атрибут tag модели тегов, он включает весь объект.

Я хочу перечислить только атрибут tag в представлении, но я хочу ссылаться на массив целых объектов Tag, когда придет время создавать связь с пользователем.

Это как текущий раскрывающийся список выглядит в браузере: enter image description here

Вот мой входной компонент, удаляющий нерелевантные части, поэтому он соответствует ограничениям размера SO: 

<template>
  <div >
    <b-container class="mt-8 pb-5">
      <b-row class="justify-content-center">
        <b-col lg="5" md="7">
          <form>
           ...

            <div v-if="step === 3">
              <h2><strong>What topics are you interested in?</strong> (e.g tag1, tag2, etc...)</h2>
              <h2>A few popular ones: 
                <button @click.prevent="addToTags(item)" class="btn btn-sm btn-success" v-for="item in existingTags.slice(0, 3)" :key="item.id">
                  {{ item.tag }}
                </button>
              </h2>
              <vue-tags-input
                v-model="tag"
                v-on:keyup.native="getTags"
                :tags="tags"
                :autocomplete-items="filteredItems"
                :autocomplete-min-length=3
                @tags-changed="confirmedTags"
              />

            </div>

            ...
          </form>
        </b-col>
      </b-row>
    </b-container>
  </div>
</template>

<script>
import VueTagsInput from '@johmun/vue-tags-input';
import UsersService from '@/services/UsersService'
import TagsService from '@/services/TagsService'
import TagRelationsService from '@/services/TagRelationsService'
export default {
  name: 'UserOnboard',
  data() {
    return {
      tag: '',
      tags: [],
      ...
      }
    };
  },
  components: {
    VueTagsInput
  },
  computed: {
    filteredItems() {
      return this.existingTags.filter(i => {
        return i.tag.toLowerCase().indexOf(this.tag.toLowerCase()) !== -1;
      });
    },
    ...
    user() {
      return this.$store.state.auth.user
    },
    existingTags() {
      return this.$store.state.tags.existingTags
    }
  },
  ...
  methods:{
    ...
    },
    addToTags(newTag) {
      if (!this.tags.includes(newTag)) {
        this.tags.push(newTag)
      }
      // on button click add appropriate tag to tags array
      // console.log('tag array is: ',tags)
    },
    confirmedTags(event) {
      this.tags=event
      console.log(event)
    },
    ...
    getTags() { //debounce need to be inside conditional
      console.log('gettin tags')
      // if (this.tag.length >2) {
        this.$store.dispatch('debounceTags', this.tag)
      // }
    }
  }
}
</script>

Также вот метод debounceTags, который запускается через vuex: 

import TagsService from '@/services/TagsService'
import { debounce } from "lodash";

export const state = {
  existingTags: []
}

export const mutations = {
  setTags (state, tags) {
    state.existingTags = tags
  }
}

export const actions = {
  debounceTags: debounce(({ dispatch }, data) => {
    console.log("Inside debounced function.");
    dispatch("getTags" ,data);
  }, 300),

  async getTags ({ commit }, data) {
    await TagsService.getTags(data)
    .then(function (response) {
      console.log('before setting tags this is resp.data: ', response)
      commit('setTags', response);
    });
  }
}

export const getters = {

}
...