javascript 在VUE js中获取数组中数据的索引

Getting index of a data in an array in VUE js

提问by Delowar Hossain

I want to change the status of Tasks when a particular method is called. But The problem is I cannot get the index of the particular item of the array to change its status. This is my HTML:

我想在调用特定方法时更改任务的状态。但问题是我无法获取数组特定项目的索引来更改其状态。这是我的 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>

And this is my Vue:

这是我的 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>

I need make use of markComplete()and markIncomplete()but the problem is I couldn't find the way to get the index of current element to change its status.

我需要使用markComplete()andmarkIncomplete()但问题是我找不到获取当前元素索引以更改其状态的方法。

回答by acdcjunior

You could get the index by declaring a second argument at the v-for:

您可以通过在 处声明第二个参数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;

        },

But a, maybe simpler, alternative is to simply pass the taskas argument:

但是，也许更简单的替代方法是简单地传递taskas 参数：

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

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

        },

回答by Alexander Gavriliuk

RTFM:

RTFM：

You can use the v-repeatdirective to repeat a template element based on an Array of objects on the ViewModel. For every object in the Array, the directive will create a child Vue instance using that object as its $dataobject. These child instances inherit all data on the parent, so in the repeated element you have access to properties on both the repeated instance and the parent instance. In addition, you get access to the $indexproperty, which will be the corresponding Array index of the rendered instance.

您可以使用v-repeat指令根据 ViewModel 上的对象数组重复模板元素。对于数组中的每个对象，该指令将使用该对象作为其$data对象创建一个子 Vue 实例。这些子实例继承父实例的所有数据，因此在重复元素中，您可以访问重复实例和父实例的属性。此外，您可以访问$index属性，该属性将是呈现实例的相应 Array 索引。

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>

Source:

来源：

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

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

Note: The directive v-repeatis available in old versions of Vue.js:-)

注意：指令v-repeat在旧版本的 Vue.js 中可用:-)