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

Posted 2023-02-22

【中文标题】在VUE js中获取数组中数据的索引

【英文标题】：Getting index of a data in an array in VUE js

【发布时间】：2018-09-16 17:53:49

【问题描述】：

我想在调用特定方法时更改任务的状态。但问题是我无法获取数组特定项的索引来更改其状态。 这是我的 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() 但问题是我找不到获取当前元素索引以更改其状态的方法。

【参考方案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;

        ,

【讨论】：

对于第一个代码，我尝试了这个方法 markIncomplete() return this.tasks[index].status = false;错误：索引未定义，我该如何解决这个问题

看，方法用法@click="markComplete(index)"和方法签名也应该改变：methods: markComplete(index) 。

那么，这个是不是，Vue自动将第二个参数作为“index”？

【参考方案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 中可用 :-)