VueJs: Comment faire pour Modifier un Élément de Tableau

Simple Todo-App. Veuillez excuser mon ignorance pour faire un plutôt question de base.

Mais comment vous y prendriez-vous et de modifier un certain élément dans un tableau?

Normalement, je devrais essayer de lier la valeur de mon entrée à une nouvelle propriété sur mon objet de données puis d'attribuer cette nouvelle propriété de l'ancienne propriété sur cliquez sur throuch Vue de les deux sens de la liaison de données.

Comme ceci: http://jsfiddle.net/z7960up7/

Bien dans mon cas, j'ai utiliser le v-répéter la directive, qui parcourt mon tableau de données, mais je ne peux pas utiliser le v-modèle de la directive d'utiliser les deux sens de la liaison de données, car les valeurs des propriétés d'obtenir endommagé si je le fais. (Voir ici: http://jsfiddle.net/doL46etq/2/)

Et maintenant je me demande, comment je pourrais aller sur la mise à jour de mon tableau de tâches:

Mon idée est de passer le VueObject (ce) grâce à ma méthode sur la souris, puis définissez l'index sur mon gestionnaire d'événement et de mettre à jour le tableau des tâches, à l'aide de l'index, comme ceci:

HTML: 

<input v-el="editInputField" type="text" value="{{ task.body }}" v-on="keyup: doneEdit(this) | key 'enter'"/>

<button v-on="click: editTask(this)">
     Edit
</button>

JS:

methods: {
    editTask: function (task) {
        var taskIndex = this.tasks.indexOf(task.task);

        this.tasks[taskIndex] = {
            'body': document.querySelector('input').value,
            'completed': false
        };

        console.log(task.task.body);
    },
}

Voici mon violon sujet:

http://jsfiddle.net/doL46etq/3/

Mais l'objet de données n'est pas à jour du tout et je me demande comment je pourrais aller à ce sujet et le mettre à jour.

Quel est le meilleur moyen de modifier un élément du tableau, à l'aide Vue?

Edit: Un moyen facile, serait simplement de supprimer l'élément, et ajouter le nouveau à la matrice, à l'aide de la méthode push, mais je veux vraiment juste pour mettre à jour l'élément, parce que je tiens à garder le dataobject en synchronisation avec mon backend.

OriginalL'auteur LoveAndHappiness | 2015-08-09

  1. 3

    La réponse est simple: Utiliser un composant dans une longue constructeur, puis passer l'indice de l'élément en HTML de la propriété et utiliser les propriétés calculées de lien arrière et en avant de vos données.

    Mais ne pas se contenter de la réponse courte. Voici la longue:

    Situation: je suis en utilisant votre JSFiddle comme base pour cette réponse.

    en HTML vous avez:

    <td>{{ task.body }}</td>
                <td>
                    <div>
                        <input v-el="editInputField" type="text" value="{{ task.body }}" v-on="keyup: doneEdit(this) | key 'enter'" v-model="newEdit"/>
                    </div>
                </td>
                <td>
                    <button v-on="click: editTask(this)" class="mdl-button mdl-js-button mdl-button--icon"> <i class="material-icons">create</i>

                    </button>
                </td>

    Nous voulons remplacer ce code par le composant. L'utilisation de ce composant nous permet d'identifier l'index/ligne nous travaillons sur de votre ensemble de données.

    <td v-component="listitem" index="{{$index}}"></td>

    Prochaine étape: définir le composant.

    Afin de ne pas obscurcir notre exemple avec le composant, nous allons créer un constructeur de la vue de l'objet, de sorte que nous pouvons lui attribuer le nouvel élément à notre objet.

    Ceci est fait en utilisant l'extension.

    window.newVue =  Vue.extend({
components:
{
    'listitem': {

        props: ['index'],

        computed: {
        //both get and set
        body: {
          get: function () {

            return this.$parent.tasks[this.index].body;
          },
          set: function (v) {
            this.$parent.tasks[this.index].body = v
          }
        }
      },
        template: '<td>{{ body }}</td><td><div><input type="text" v-model="body" value="{{ body }}"/></div></td><td></td>',
    }
}

    });

    Puisque nous ne pouvons pas définir nos données correctement à l'aide de l'étendre, nous allons simplement supposer que les données existent déjà lors de l'écriture de la composante.

    Étape 3: définition des données réelles:
    Au lieu d'utiliser Vue que notre constructeur de l'objet, nous allons maintenant utiliser notre nouvellement créé instantiator.

    new newVue({
el: '#todoapp',

data: {
    tasks: [{
        'body': 'Eat breakfast',
        'completed': false
    }, {
        'body': 'Drink milk',
        'completed': false
    }, {
        'body': 'Go to the store',
        'completed': false
    }],

    newTask: '',
},

    });

    Que c'est!

    Dans le cas où vous ne pouvait pas suivre ce qui s'est passé: Voici le Violon!

    PS: Plus d'informations sur le fonctionnement de ces code peut être trouvé sur vuejs.org

    Merci Sangun. Bien que cela va me prendre un certain temps à travailler par le biais de votre réponse, car je n'ai pas diven en vue des composants encore. Bien que je me demandais si vous pourriez nous expliquer, comment le modifier/mise à jour a été fait ici, je suppose que sans l'utilisation de composants: github.com/tastejs/todomvc/blob/gh-pages/examples/vue/js/app.js
    Aussi, quand il serait temps de tirer une Requête Ajax dans votre jsfiddle?
    Cela dépend de ce que vous voulez faire avec la Requête Ajax. Si vous souhaitez mettre à jour les informations dans une base de données, puis de tir à partir de l'accesseur sur le composant serait le meilleur (Cependant, gardez à l'esprit qu'une demande serait faite chaque fois qu'un seul caractère change, de sorte que vous pouvez mettre un délai de tampon et de tous les changements!) Si dans le cas où vous souhaitez mettre à jour les données, je suggère l'ajout d'une nouvelle propriété plutôt que de définir des données. Cela vous permettra de modifier la valeur par l'intermédiaire d'un établissement. Cela signifie que si vous souhaitez utiliser le v-répétition de l'élément, vous pouvez utiliser {{item.propriété}} pour mettre à jour la variable.
    Merci Sangun, j'ai accepté votre réponse. Pourtant, je pourrais réintégrer la question demandant une solution sans "composants", depuis que j'ai (peut-être à tort) à croire, que les composants sont là pour aider à faire des tâches de base plus facile, et de ne pas faire des tâches de base possible. Je vais travailler à travers un couple de fois à travers le todomvc.com application et par le biais de votre solution et va probablement être plus intelligent jusqu'à alors. Je vous remercie beaucoup.
    Vous pouvez faire la même chose sans les composants en utilisant le routeur addon faite par la même personne Vue.JS fait. Cependant, ce plugin est explorée par moi et je suis incapable de vous donner une réponse satisfaisante à cet égard. Si vous souhaitez avoir une solution sans composants (qui fonctionne tout aussi bien, à mon avis), vous souhaitez travailler avec github.com/vuejs/vue-router. Espérons que ça aide!

    OriginalL'auteur Sangun

  2. 2

    En fait le moyen le plus simple pour mettre à jour un élément de tableau, est de lier la tâche corps avec le v-modèle directive.

    Exemple:

    http://jsfiddle.net/z7960up7/2/

    <div id="demo">
    {{ message }}

    <div class="edit">
        <input type="text" v-model="message">         
        <button v-on="click: editMessage">Edit</button>
    </div>        
    <pre>{{ $data | json }}</pre>
</div>

    Et déclencher un événement à chaque fois que vous le flou de la zone d'entrée ou sur le bouton modifier est frappé.

    Également masquer le champ de saisie avec des css, en utilisant le v-classe directive.

    OriginalL'auteur LoveAndHappiness