Question

我正在尝试这样做，以便能够动态地将类绑定到同一个Nuxt组件的第二个实例中的DOM元素。

index.vue

<template>
  <div>
    <div v-for="block in page.fields.blocks">
      <Block v-if="block.fields.style === 'Block'"/>
    </div>
  </div>
</template>

Block.vue

<template>
  <div class="block" v-bind:class="ifThisIsASecondInstance ? 'left' : 'right'">
  </div>
</template>

Answer 1

我认为这可以通过使用css来解决。

div > .Block:nth-child(2) {
    // style definition
}

另一种方法是在外部循环中绑定类。

filteredPageFieldsBlocks = page.fields.blocks.filter(b => block.fields.style === 'Block')

<template>
  <div>
    <div v-for="(block, index) in filteredPageFieldsBlocks">
      <Block :class="index === 1 ? 'left' : 'right'"/>
    </div>
  </div>
</template>

Answer 2

如何在v-for中定位nuxt组件的第二个实例循环？

我会告诉你如何做到这一点

<强> index.vue

<div 
    v-for="(block,index) in page.fields.blocks" 
    :key="block.id">

    <Block 
        v-if="block.fields.style === 'Block'" 
        :index="index"/>
</div>

我将假设这是page.field.blocks

中的信息

page :  {
    fields : {
        blocks : [
            {id:"a1", name:"mars",    fields : {style : "Block"}}, //index 0
            {id:"a2", name:"jupiter", fields : {style : "Block"}}, //index 1
            {id:"a3", name:"saturn",  fields : {style : "Block"}}, //index 2
            {id:"a4", name:"uranus",  fields : {style : "Block"}}, //index 3
            {id:"a5", name:"neptune", fields : {style : "Block"}}  //index 4
        ]
   }
}

index中的v-for="(block,index)对象将包含数组page.field.blocks中元素的顺序

对于您的用例，我们需要使用此index对象
index对象需要传递给子组件，即 Block.vue :index="index"
使用index

Block.vue

props

<强> Block.vue

<template>
  <div>
      <div>block.vue</div> 
      <div :class="index == 1 ? 'left' : 'right'">{{index}}</div>
  </div>
</template>

<script>
export default {
  props:["index"]
}
</script>

您的目标是专门检查第二个元素。检查是否index == 1并指定相应的班级:class="index == 1 ? 'left' : 'right'"

<强>更新

我似乎错过了{strong> @Morty Choi 突出显示的simple logic。以下所有代码更改都应在index.vue

中完成

创建一个计算属性，以便在事先用style === 'Block'过滤对象

computed:{
      filterBlocks(){
        return this.page.fields.blocks.filter((data) => data.fields.style === 'Block');
      }
}

然后在v-for

中使用计算属性index.vue

<div 
    v-for="(block,index) in filterBlocks" 
    :key="block.id">

如何在v-for循环中定位nuxt组件的第二个实例？

2 个答案: