сделать поле ввода, как опция выбора нескольких

Question

У меня есть поле ввода, где я делаю массив, когда пользователь что-то печатает. Я разделяю строку на массив, когда пользователь нажимает ','. Поэтому, если пользователь вводит: «яблоко, банан, манго», массив будет: ['apple', 'banna', 'mango']. Я использую vuejs 2. Код для генерации массива:

<template>
    <input type="text" v-model="labelString" @keyup="addLabels">
</template>
<script>
export default {
    data() {
        return {
            labelString: '',
            labels: []
        }
    },
    methods: {
        addLabels() {
            this.labels = this.labelString.split(',');
        },
    }
}
</script>

Теперь я хочу сделать поле ввода похожим на поле «Теги» на сайте StackOverflow (когда вы задали вопрос, прямо над кнопкой «Опубликовать свой вопрос») .. когда пользователь вводит слово / слова, а затем нажимает «,», оно будет отделяться как это поле. Может кто-нибудь помочь мне, как это сделать? Или помогите мне найти направление. ТИА

Answer 1

Вы должны сделать что-то вроде:

<template> <span>{{ labels }}</span><input type="text" v-model="labelString" @keyup.188="addLabels"> </template>

new Vue({
  el: "#app",
  data() {
        return {
            labelString: '',
            labels: []
        }
    },
    methods: {
        addLabels() {
            this.labels.push(this.labelString);
            this.labelString = '';
        },
    }
})

Sample

А затем стиль span с метками, чтобы он выглядел, как он расположен "внутри" input.