Question

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

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

我需要使用markComplete()和markIncomplete()，但问题是我找不到获取当前元素索引来改变其状态的方法。

Answer 1

您可以按declaring a second argument at the 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;

        },

但是，一个更简单的替代方法就是将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;

        },

Answer 2

RTFM：

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

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>

来源：

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

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

以VUE js获取数组中数据的索引

2 个答案:

RTFM：

来源：