Obtenir l'index d'une donnée dans un tableau dans VUE js

Question

Je souhaite modifier l'état des tâches lorsqu'une méthode particulière est appelée. Mais le problème est que je ne peux pas obtenir l'index de l'élément particulier du tableau pour changer son statut. Voici mon code HTML :

<div class="main" id="my-vue-app">
    <ul>
        <li v-for="task in completeTask">
            {{ task.description }} <button @click="markIncomplete">Mark as Incomplete</button>
        </li>

    </ul>
    <ul>
        <li v-for="task in incompleteTask">
            {{ task.description }} <button @click="markComplete">Mark as Complete</button>

        </li>
    </ul>
</div>

Et voici mon Vue :

<script>
    new Vue(
        {
            el: '#my-vue-app',
            data:
            {
                tasks: [
                {description:'go to market', status: true},
                {description:'buy book', status: true}, 
                {description:'eat biriani', status: true}, 
                {description:'walk half kilo', status: false}, 
                {description:'eat icecream', status: false}, 
                {description:'return to home', status: false}
                ]
            },
            computed: 
            {
                incompleteTask()
                {
                    return this.tasks.filter(task => ! task.status);
                },
                completeTask()
                {
                    return this.tasks.filter(task => task.status);
                }
            },
            methods: 
            {
                markComplete()
                {
                    return this.task.status = true;

                },
                markIncomplete()
                {
                    return this.task.status = false;
                }
            }
        }
    )
</script>

J'ai besoin d'utiliser markComplete() y markIncomplete() mais le problème est que je n'ai pas trouvé le moyen d'obtenir l'index de l'élément courant pour changer son statut.

Answer 1

Vous pouvez obtenir l'index par en déclarant un deuxième argument au v-for :

<li v-for="(task, index) in incompleteTask">
    {{ task.description }} <button @click="markComplete(index)">Mark as Complete</button>
</li>

    methods: 
    {
        markComplete(index)
        {
            return this.tasks[index].status = true;

        },

Mais une autre solution, peut-être plus simple, consiste simplement à faire passer le task comme argument :

<li v-for="task in incompleteTask">
    {{ task.description }} <button @click="markComplete(task)">Mark as Complete</button>
</li>

    methods: 
    {
        markComplete(task)
        {
            return task.status = true;

        },

Answer 2

RTFM :

Vous pouvez utiliser le v-répétition directive visant à répéter un modèle en fonction d'un tableau d'objets du ViewModel. Pour chaque objet du la directive créera une instance Vue enfant qui utilisera l'objet en tant qu'objet $data objet. Ces instances enfant héritent de toutes les données du parent, de sorte que dans l'élément répété, vous avez accès aux propriétés suivantes aux propriétés de l'instance répétée et de l'instance parentale. En outre, y En outre, vous avez accès à l'instance répétée et à l'instance parentale. Index qui sera correspondant à l'index du tableau de l'instance rendue.

var demo = new Vue({
  el: '#demo',
  data: {
    parentMsg: 'Hello',
    items: [
      { childMsg: 'Foo' },
      { childMsg: 'Bar' }
    ]
  }
})

<script src="https://unpkg.com/vue@0.12.16/dist/vue.min.js"></script>

<ul id="demo">
  <li v-repeat="items" class="item-{{$index}}">
    {{$index}} - {{parentMsg}} {{childMsg}}
  </li>
</ul>

Source :

https://012.vuejs.org/guide/list.html

Nota: La directive v-répétition est disponible dans les anciennes versions de Vue.js :-)