在 vue for 循环中从对象渲染

Question

我想呈现问题和答案，并将一种样式附加到问题中，将另一种样式附加到答案中。

我的数据看起来像这样

 dialogTut:{

        mainTab:{

          q:"data with 42 people?",

          a:"hehe",

          q:"Are awesome people?",

          a:"sometimes",

          q:"Are awesome people2?",

        }

      },

我想在 Label 中渲染它，因为它的 nativescript （也许还有其他方法）

<StackLayout class="dialog">

        <Label v-bind:key="item.index"

              :text="item" 

              :class="[item==q ? 'h3' : '' , 'a']" 

              v-for="item in mainTab">

        </Label>

        <Button class="drawer-close-button" text="Cancel" @tap="closeDialog"></Button>

    </StackLayout>

我尝试了一些可能性：class 但不起作用。如何呈现整个列表并将 'h3' 类附加到 item.q 并将 'answer' 类附加到 item.a ？

Answer 1

我会以这种方式重组您的数据：mainTab:[&nbsp; &nbsp;{q:"data with 42 people?", a:"hehe"},&nbsp; &nbsp;{q:"Are awesome people?", a:"sometimes"}]和你的 html：<template&nbsp;&nbsp; &nbsp;:value="item.q"&nbsp;&nbsp; &nbsp;v-for="(item,index) in mainTab">&nbsp; &nbsp;<p class="questionClass" :key="'q_'+index">{{item.q}}</p>&nbsp; &nbsp;<p class="answerClass" :key="'a_'+index">{{item.a}}</p></template>

Answer 2

替换为 :class="[item==q ? 'h3' : 'answer']" 或 :class="{ 'h3': item==q, 'answer': item==a }"