Как сделать компонент autocomplete более универсальным?

Question

[nastya_zholudeva]

<template>
<div>
  <p>Try typing <em>draw</em> or <em>fill</em></p>
  <input id="autocomplete" type="text"
    :value="value"
    @input = "updateValue($event.target.value)"
    @blur = "updateValue()"
  />
  <div id="autocomplete_result" v-show="open">
    <p v-for="(item, index) in values"
       :key="item.id"
       @click="select(index)"
    >
      <img :src="item.img" alt="">
      <span>{{ item.title }}</span>
      <span v-if="desc">{{ item.desc }}</span>
    </p>
  </div>
</div>
</template>

<script>
export default {
  name: 'Autocomplete',
  props: {
    value: {
      type: String,
      default: ''
    },
    getItems: {
      type: Function
    },
    desc: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      open: false,
      values: []
    }
  },
  methods: {
    updateValue (value) {
      this.open = true
      this.getItems().then(result => {
        this.values = result
      })
      this.$emit('input', value)
    },

    select (index) {
      this.$emit('input', this.values[index].title + ' ' + this.values[index].desc)
      this.open = false
    }
  }
}
</script>

сейчас при выборе нужного элемента в инпут эмитится this.$emit('input', this.values[index].title + ' ' + this.values[index].desc), но, допустим, на другой странице описание не нужно. Как сделать так, чтобы эмитились только нужные свойства объекта данных?

Answer 1

[Алексей Ярков]

1. Передать в пропсах массив нужных ключей и фильтровать ответ
2. Эмитить this.values[index] и не париться

Comments

[nastya_zholudeva]

Алексей Ярков, а если в updateValue там где приходит ответ, нужно больше значений, чем потом заполнить. Допустим, когда начинаешь вводить что-то, то отображается картинка, имя и описание, а по клику нужно в инпуте оставить только имя и описание?

[Алексей Ярков]

nastya_zholudeva, пункт 2, очевидно же ))) Передавайте все и пользуйтесь тем чем нужно.

[nastya_zholudeva]

Алексей Ярков, честно говоря, не очень понятно...

фильтровать ответ

это

this.getItems().then(result => {
        this.values = result
      })

здесь фильтровать?

[Алексей Ярков]

nastya_zholudeva, а вы сами написали компонент или взяли готовый?

[nastya_zholudeva]

Алексей Ярков, сама, опираясь на https://github.com/fareez-ahamed/autocomplete-vuejs2

[Алексей Ярков]

Передать в пропсах массив нужных ключей и фильтровать ответ

Добавьте пропс keys и туда кладите ключи, которые надо вернуть: ['title', 'desc']
А потом фильтруйте:

const obj = this.values[index] // вот тут фильтруйте объект, оставляя только ключи из this.keys
this.$emit('input', obj)

[nastya_zholudeva]

Алексей Ярков, this.$emit('input', obj) но инпут ведь ждет строку, а не объект

[0xD34F]

nastya_zholudeva, ну тогда собирайте эту строку на основе массива keys:

this.$emit('input', this.keys.reduce((arr, key) => [...arr, this.values[index][key]], []).join(' '))

[nastya_zholudeva]

0xD34F, спасибо большое, именно это и было нужно:)