Vue: текстовое поле с заголовком

Question

Я хочу сделать текстовое поле с typeahead. У меня есть список слов, и когда вы начинаете набирать их, появляется предложение со словом (ами). Дело в том, что он должен уметь делать это несколько раз, каждое новое слово, которое вы вводите, может показывать вам предложение.

Кто-нибудь знает, как я могу это сделать?

Answer 1

Вы можете использовать vue -представление , чтобы выполнить sh это легко. Взгляните на demo , чтобы увидеть, подходит ли вам это.

Это моя реализация приложения. vue, которая немного отличается.

<template>
  <div>
    {{ items }}
    <vue-suggestion :items="results"
                    v-model="item"
                    :setLabel="setLabel"
                    :itemTemplate="itemTemplate"
                    @changed="inputChange"
                    @selected="itemSelected">
    </vue-suggestion>
  </div>
</template>

<script>
  import itemTemplate from './item-template.vue';
  export default {
    data () {
      return {
        item: {},
        items: [
          { id: 1, name: 'Golden Retriever'},
          { id: 2, name: 'Flying Squirrel'},
          { id: 3, name: 'Cat'},
          { id: 4, name: 'Catfish'},
          { id: 5, name: 'Squirrel'},
        ],
        itemTemplate,
        results: {}
      }
    },
    methods: {
      itemSelected (item) {
        this.item = item;
      },
      setLabel (item) {
        return item.name;
      },
      inputChange (text) {
        // your search method
        this.results = this.items.filter(item => item.name.includes(text));
        // now `items` will be showed in the suggestion list
      },
    },
  };
</script>