web-dev-qa-db-fra.com

Obtention de l'index d'une donnée dans un tableau en VUE js

Je souhaite modifier le statut 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 état. Voici mon 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 ma 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 de faire usage de markComplete() et markIncomplete() mais le problème est que je n'ai pas pu trouver le moyen d'obtenir l'index de l'élément courant pour changer son statut.

javascriptarrayssortingvue.jsvuejs2
4
Delowar Hossain

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 alternative, peut-être plus simple, consiste à simplement passer l'argument task:

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

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

        },
10
acdcjunior

RTFM:

Vous pouvez utiliser la directive v-repeat pour répéter un élément de modèle basé sur un tableau d'objets sur le ViewModel. Pour chaque objet du tableau, la directive créera un enfant Vue instance utilisant cet objet comme son $ data objet . Ces instances enfants héritent de toutes les données sur le parent. Ainsi, dans l'élément répété, vous avez accès aux propriétés de l'instance répétée et de l'instance parent. De plus, vous avez accès à l'index $ , qui sera l'index Array correspondant de l'instance rendue.

var demo = new Vue({
  el: '#demo',
  data: {
    parentMsg: 'Hello',
    items: [
      { childMsg: 'Foo' },
      { childMsg: 'Bar' }
    ]
  }
})
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>

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

La source:

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

Remarque: La directive v-repeat est disponible dans les anciennes versions de Vue.js :-)

0
Alexander Gavriliuk