"Learn how to efficiently incorporate data into data-binding in VUE JS with just a

Question

"Learn how to efficiently incorporate data into data-binding in VUE JS with just a

In my data binding, there is a string that reads as follows:

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

I want to create an input field where I can enter "bc-some-category", click "Add", and have it appended to the end of the list with a comma in front.

Here is what my markup looks like:

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

I'm wondering how I can achieve this functionality in vueJS as I couldn't find any specific documentation on it in the guide.

javascript vue.js vuejs2

Answer 1

Answer №1

https://jsfiddle.net/30hyzqsp/

It seems like there might be some confusion regarding your question, but the following code should help solve the issue. Please make sure to adjust it according to your specific data structure:

<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

https://jsfiddle.net/30hyzqsp/

It seems like there might be some confusion regarding your question, but the following code should help solve the issue. Please make sure to adjust it according to your specific data structure:

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

Answer №2

To control user input and push the model value to different categories on a button click, you can utilize the v-model directive:

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 4

To control user input and push the model value to different categories on a button click, you can utilize the v-model directive:

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 5

Answer №3

To capture the user's input and store it, you can utilize the v-model directive.

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

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

When the user clicks on the Add button, you need to include that value:

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

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

Answer 6

To capture the user's input and store it, you can utilize the v-model directive.

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

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

When the user clicks on the Add button, you need to include that value:

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

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

"Learn how to efficiently incorporate data into data-binding in VUE JS with just a

Answer №1

Answer №2

Answer №3

Similar questions

Issue: React child components cannot be objects (received: object with keys)

Encountering issues with importing a module from a .ts file

Using Codeception's selenium module to wait for JavaScript and Ajax requests to

"Turn a blind eye to Restangular's setRequestInterceptor just this

Unable to provide any input while utilizing npm prompts

Exploring data visualization through object classification in Angular JS

Searching for hidden elements within a div using a filter option

Steps for populating an ng-table with data retrieved from a REST web service that returns a JSON format

Transfer the AWS configuration settings to the imported module

What sets response.setHeader apart from response.writeHead?

Alert: The flattening operation is not a recognized function. Proceed with --force option to proceed

Tips for embedding Jquery code within Vuejs applications

Ensure that only the most recent Ajax request is allowed

PHP not receiving POST information from $.ajax call

Encountering an issue with React npm causing errors that I am unable to resolve

The initial setting of [opened]="true" causes an issue with the Angular Material date range picker

Utilizing $.each to dynamically add data to a jQuery Mobile listview

Using Vue to alter data through mutations

Utilizing the principles of object orientation in Javascript to enhance event management

Validation of phone numbers based on country codes