Question

我有一个包含以下字符串的数据绑定：

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>

Answer 2

您可以使用v-model指令来控制用户输入，并在单击按钮时将模型值推到其他类别：

new Vue({
    el: '#demo',
    data () {
        return {
            categories: [
                'bc-men',
                'bc-men-fashion',
                'bc-men-underwear'
            ],
            newCategory: ''
        }
    },
    methods: {
        addCategory(category) {
            this.categories.push(category);
        }
    }
});

Vue.config.devtools = false;
Vue.config.productionTip = false

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<ul>
    <li v-for="category in categories">{{ category }}</li>
</ul>
<input v-model="newCategory" required type="text" name="fname">
<button @click="addCategory(newCategory)">
    Add
</button>
</div>

Answer 3

您需要存储用户在输入中输入的内容，例如使用v -model：

data () {
  return {
    userInput: ''
  }
}

<input class="" v-model="userInput" required type="text" name="fname">

然后，只要用户单击Add按钮，便会添加该值：

<button class="" v-on:click="addProduct">
    Add
</button>

methods: {
  addProduct () {
    this.product.refrencing_category_ids += `,${this.userInput}`;
    this.userInput = '';
  }
}

VUE JS单击时将数据添加到数据绑定中

3 个答案: