javascript - VUE JS 在点击时将数据添加到数据绑定(bind)

Question

我有一个包含以下字符串的数据绑定(bind):

bc-men,bc-men-fashion,bc-men-underwear

我想要一个输入字段，我可以在其中添加 "bc-some-category" 然后单击“添加”，它将添加到列表的末尾，带有 , (逗号)在前面。

我的标记如下所示:

<div class="js-referencing-categories">{{ product.refrencing_category_ids }}</div>
<input class="" required type="text" name="fname">
<button class="" v-on:click="product.refrencing_category_ids.add.value">
    Add
</button>

为了实现这一点我需要做什么，我似乎没有在 vueJS 指南中找到任何关于这方面的文档。

Answer 1

https://jsfiddle.net/30hyzqsp/

我不确定是否完全理解您的问题，但这应该可以解决问题。您必须适应您的数据结构:

<template>
    <div>
        <div class="js-referencing-categories">{{ categories.join(', ') }}</div>
        <input class="" required type="text" name="fname" ref="input">
        <button class="" @click="addCategory($refs.input)">
            Add
        </button>
    </div>

</template>

<script>
    export default {
        data () {
            return {
                categories: []
            }
        },
        methods: {
            addCategory (e) {
                this.categories.push(e.value)
                e.value = ''
            }
        }
    }
</script>