关于怎样处理vue中v-for循环时对循环内容中单独的一项的事件处理有如下方案:

(1)获取v-for循环内容中的下标值(val为navContent中的内容,index为下标)

        <p v-for="(val,index) in navContent" class="nav">
           {{val}} --{{index}}

    <i class="el-icon-arrow-right right"></i>

 </p>


        data () {
        return {
        navContent:[
        "红色",
        "蓝色",
        "绿色",
        "白色",
        "黑色",
        "紫色"
         ]
    }

(2)事件处理函数的传参(参数即为下标值)

        核心部分:@click="change(index)"

       完整代码:

      <p v-for="(val,index) in navContent" class="nav" @click="change(index)">
                {{val}} --{{index}}

    <i class="el-icon-arrow-right right"></i>

 </p>

        

(3)处理点击操作的事件

        methods: {
   change(index) {
               //具体处理的方法
    alert(index);
   }
  }

Logo

前往低代码交流专区

更多推荐