如何将标签/插槽添加到输入字段 Vue

Question

在 Vue 中，我有一个基本的输入文本字段，用户可以在其中输入内容。我想根据用户类型创建可移动插槽。我有一个按钮，用户可以在其中单击“添加插槽”，然后输入他们想要的内容。查看图片1。

我想要用户在该字段中输入的位置。无论他们输入什么，都会像第二个一样成为一个插槽 图片。

**我搜索了文档和 Vue 文档，它们的示例太复杂了。我想要一个简单的示例来显示模板 div/input + 自动完成和实际检索值的脚本。 ** 感谢您的帮助。

我希望 UI 像第二张图片

Answer 1

您可以为该按钮设置一个单击侦听器，并在单击时获取用户编写的任何内容，并将其存储在某个数据结构（可能是数组）中。 然后，遍历该数组并为每个数组创建插槽。 为每个 slot 设置一个 onclick 事件，并在点击时从数组中删除索引。

<template>
<div>
    <input type="text border" v-model="text">
    <button @click="addSlot">Add Slot</button>
    <div>
       <div class="chip" v-for="(slot, idx) in slots" :key="idx">
           {{slot}}
           <i class="close material-icons" @click="removeSlot(idx)">close</i>
       </div>
  </div>
</div>
</template>

<script>
export default {
    data: () => ({
        text: '',
        slots: []
    }),
    methods: {
        addSlot() {
            this.slots.push(this.text)
            this.text = ''
        },
        removeSlot(idx) {
            this.slots.splice(idx, 1)
        },
    }
}
</script>