1
votes

VUE JS ajoute des données à la liaison de données en un clic

J'ai une liaison de données qui contient la chaîne suivante:

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

Je voudrais avoir un champ de saisie dans lequel je pourrais ajouter "bc-some-category" code> puis cliquez sur "Ajouter" et il serait ajouté à la fin de la liste avec un, (virgule) devant.

Mon balisage ressemble à ce qui suit:

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

Que dois-je faire pour y parvenir, je ne semble pas trouver de documentation à ce sujet dans le guide vueJS.

javascript vue.js vuejs2

1 commentaires

Voici un bon tutoriel laracasts.com/series/learn -vue-2-étape par étape / épisodes / 5

3 Réponses :

2
votes

https://jsfiddle.net/30hyzqsp/

Je ne sais pas trop Comprenez votre question, mais cela devrait faire l'affaire. Vous devrez vous adapter à votre structure de données 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>

0 commentaires

0
votes

Vous devez stocker ce que l'utilisateur a tapé dans votre entrée, par exemple en utilisant v -model :

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

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

Ensuite, chaque fois que l'utilisateur clique sur le bouton Ajouter , vous ajoutez cette valeur:

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

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

0 commentaires

1
votes

Vous pouvez utiliser v-model a > directive pour contrôler l'entrée utilisateur et pousser la valeur du modèle vers d'autres catégories en cliquant sur le bouton:

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

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

0 commentaires