如何在v-for循环中定位Nuxt组件的第二个实例并动态绑定类？

嘿，我明白你的需求啦——想给循环渲染的第二个Block组件实例绑定特定的类，对吧？其实很简单，咱们只需要通过父组件传递实例索引，子组件根据索引判断就行，具体步骤如下：

1. 父组件（index.vue）传递索引 #

在v-for循环里添加上索引参数，然后把这个索引通过props传给Block组件：

<template>
  <div>
    <!-- 加上index参数，传给子组件 -->
    <div v-for="(block, index) in page.fields.blocks" :key="index">
      <Block 
        v-if="block.fields.style === 'Block'"
        :instance-index="index" 
      />
    </div>
  </div>
</template>

2. 子组件（Block.vue）接收索引并判断 #

首先在子组件里定义props接收instanceIndex，然后通过计算属性或者直接在类绑定里判断是否是第二个实例（注意：v-for的索引是从0开始的，所以第二个实例的索引是1）：

方式一：使用计算属性（更清晰易维护） #

<template>
  <div class="block" :class="blockClass">
  </div>
</template>

<script>
export default {
  props: {
    instanceIndex: {
      type: Number,
      required: true
    }
  },
  computed: {
    blockClass() {
      // 判断是否是第二个实例（索引为1）
      return this.instanceIndex === 1 ? 'left' : 'right'
    }
  }
}
</script>

方式二：直接在绑定中判断（更简洁） #

<template>
  <div class="block" :class="instanceIndex === 1 ? 'left' : 'right'">
  </div>
</template>

<script>
export default {
  props: {
    instanceIndex: {
      type: Number,
      required: true
    }
  }
}
</script>

这样一来，当循环到第二个Block实例时，它就会自动绑定left类，其他实例则绑定right类啦～

内容的提问来源于stack exchange，提问作者thebfftim