时间戳

首页 > 解决方案 > 制作一个输入字段，例如多选选项

javascript - 制作一个输入字段，例如多选选项

问题描述

我有一个输入字段，当用户键入内容时我正在创建一个数组。当用户按“，”时，我将字符串分隔为数组。因此，如果用户键入：“apple,banana,mango”，则数组为：['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 网站的标签字段（当您提出问题时，在“发布您的问题”按钮上方）..当用户输入一个单词/单词然后按“”时，它将像这个领域。谁能帮我怎么做？或者帮我找个方向。TIA

标签： javascriptvue.jsvuejs2

解决方案

您应该执行以下操作：

<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 = '';
        },
    }
})

样本

然后span使用标签设置样式，使其看起来像位于“内部” input。

推荐阅读