uni-app中v-for里面使用插件,在treeConfirm里面传递index,为什么一直是0

发布于 1周前 作者 zlyuanteng 来自 Uni-App

uni-app中v-for里面使用插件,在treeConfirm里面传递index,为什么一直是0

表格

信息类型 信息内容
开发环境
版本号
项目创建方式 



<view class="" v-for="(item, index) in postList" :key="index">  
<u-form-item label="岗位名称" prop="postName" star id="nation">  
<select-picker :data="deptList" :props="{ label: 'postName', value: 'id' }" v-model="item.postId" placeholder="请选择民族"></select-picker>  
</u-form-item>  
<u-form-item label="部门" prop="deptName" star id="nation">  
<tki-tree  
ref="tkitree"  
range="postNameList"  
idKey="id"  
selectParent="true"  
title="选择部门"  
rangeKey="rangeKey"  
confirmColor="#4e8af7"  
[@confirm](/user/confirm)="treeConfirm(index, event)"  
/>  
<u-input class="uni-input" v-model="item.deptName" name="input" placeholder="这是一个输入框" [@focus](/user/focus)="showTree" />  
</u-form-item>  
<u-form-item label="省" prop="provinceName" star id="nation">  
<u-input readonly v-model="item.provinceName"></u-input>  
</u-form-item>  
<u-form-item label="市" prop="cityName" star id="nation">  
<u-input readonly v-model="item.cityName"></u-input>  
</u-form-item>  
<u-form-item label="区" prop="districtName" star id="nation">  
<u-input readonly v-model="item.districtName"></u-input>  
</u-form-item>  
<u-form-item label="机构负责人" prop="managerName" star id="nation">  
<u-input readonly v-model="item.managerName"></u-input>  
</u-form-item>  
<view class="flex-alignc-justifye">  
<span v-if="isLastItem(index)" class="pointer add mr-20" [@click](/user/click)="addPost(index)">新增岗位</span>  
<span class="pointer red" [@click](/user/click)="delPost(index)">删除岗位</span>  
</view>  
</view>

Harmonyos Next教程
1 回复

在uni-app中使用v-for循环时，如果在循环体内调用一个插件或方法并尝试传递当前项的索引（index），但发现传递的索引值一直是0，这通常是由于JavaScript闭包作用域的问题导致的。在v-for中，由于循环变量的作用域问题，可能会捕获到循环结束时的最终状态，而不是循环时的当前状态。

以下是一个简化的代码示例，展示如何在uni-app的v-for中正确使用索引，并传递给一个假设的treeConfirm方法，确保传递的是正确的索引值。

示例代码

假设我们有一个列表数据treeData，我们希望在每个列表项中使用一个按钮来触发treeConfirm方法，并传递当前项的索引。

<template>
  <view>
    <view v-for="(item, index) in treeData" :key="index">
      <!-- 使用一个立即执行函数来确保捕获当前的index值 -->
      <button @click="(e) => treeConfirm(index, e)">Confirm {{ index }}</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    };
  },
  methods: {
    treeConfirm(index, event) {
      console.log('Confirmed item at index:', index);
      // 这里可以处理点击事件，比如发送请求或更新数据
    }
  }
};
</script>

解释

  1. v-for循环：使用v-for="(item, index) in treeData"来遍历treeData数组，同时获取当前项的索引index。
  2. 按钮点击事件：在按钮的@click事件中，我们使用了一个立即执行函数(e) => treeConfirm(index, e)。这是为了创建一个新的作用域，从而确保传递给treeConfirm的index是当前的索引值，而不是循环结束时的最终索引值。
  3. treeConfirm方法：该方法接收两个参数，一个是索引index，另一个是点击事件对象event（虽然在这个例子中未使用，但通常用于获取更多点击事件的细节）。

通过这种方式，你可以确保在v-for循环中使用插件或方法时，传递的索引值是正确的。

回到顶部