VUE JS add data to data-binding on click

Question

I have a data binding which contains the following string:

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

I would like to have an input field in which I could add "bc-some-category" and afterwards click "Add" and it would be added to the end of the list with a ,(comma) in front.

My markup looks like the following:

<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>

What would I need to do in order to make that happen, I dont seem to find any documentation on exactly that in the vueJS guide.

Here is a good tutorial laracasts.com/series/learn-vue-2-step-by-step/episodes/5 — Daniel Gale
– Daniel Gale, Commented Jan 24, 2019 at 14:14

Hammerbot · Accepted Answer · 2019-01-24 14:11:17Z

2

https://jsfiddle.net/30hyzqsp/

I'm not sure to quite understand your question but this should do the trick. You'll have to adapt with your data structure tho:

<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>

answered Jan 24, 2019 at 14:11

Hammerbot

16.5k13 gold badges67 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tony19 · Accepted Answer · 2022-07-16 00:35:00Z

You can use v-model directive to control the user input and push the model value to other categories on the button click:

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>

tony19 · Accepted Answer · 2022-07-16 03:57:46Z

0

You need to store what the user typed in your input, for example by using v-model:

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

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

Then whenever the user clicks on the Add button, you add that value:

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

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

edited Jul 16, 2022 at 3:57

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 24, 2019 at 14:11

Saraband

1,59013 silver badges19 bronze badges

Collectives™ on Stack Overflow

VUE JS add data to data-binding on click

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related