"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

"Learn how to smoothly navigate back to the top of the page after a specified amount of time has

Having trouble establishing a two-way binding between a Vue.js component and its model in the latest version 3.4.21

Is there a way to retrieve student data by searching for a specific field?

AJAX - Self-Executing Anonymous Function

What is the best way to use AJAX to send a downloadable file in WordPress?

Attempting to create a TypeScript + React component that can accept multiple types of props, but running into the issue where only the common prop is accessible

What is the best way to define a function in React hooks - using a function statement or

Utilizing Async/Await in conjunction with Vuex dispatch functionality

Guide on integrating Select2 with webpack

Failure to receive Ajax XML data in success callback

Guide on extracting data from an HTML table column and saving it to a JavaScript array with the help of JQuery

Filtering data in Asp.net MVC 3 and converting it to JSON format

An intuitive approach to adding a CheckBox control within a GridView using JavaScript and SPAN elements

Learn how to dynamically display data without the need for refreshing using Vue.js and Laravel

Steps for transforming an array of file names into JSON format and including a specific key

Encountering a problem with Node.js because of a SyntaxError: Receiving an

What is the best way to retrieve information from an Array within a JSON Object?

encountering an issue with server-side rendering of React causing an error

Is there a way to use lodash to convert an array into an object?

Turn off ion-slide when the application starts