用V-for生成多个view class="container"的card

Question

用V-for在view中生成多个uni-card 时，由于每个组件必须只有一个根元素而失败，求正确方法

    <view class="container">            
                <uni-card title="High"  extra="14" :thumbnail="avatar" @click="onClick">
                    <view slot="actions" class="card-actions">
                        <view class="card-actions-item" @click="actionsClick('S')">
                            <uni-icons type="arrow-down" size="18" color="#999"></uni-icons>
                            <text>Stirrer</text>
                        </view>
                        <view class="card-actions-item" @click="actionsClick('Start')">                            
                            <text>89(0Dollar)</text>
                        </view>                            
                    </view>
                    <view slot="actions" class="card-actions">
                        <view class="card-actions-item" @click="actionsClick('S')">
                            <uni-icons type="arrow-down" size="18" color="#999"></uni-icons>
                            <text>Pump</text>
                        </view>
                        <view class="card-actions-item" @click="actionsClick('Start')">                            
                            <text>89(0R/M)</text>
                        </view>                            
                    </view>
                    <view slot="actions" class="card-actions">
                        <view class="card-actions-item" @click="actionsClick('S')">
                            <uni-icons type="arrow-up" size="18" color="#999"></uni-icons>
                            <text>Value</text>
                        </view>
                        <view class="card-actions-item" @click="actionsClick('Start')">                            
                            <text>89(0R/M)</text>
                        </view>                            
                    </view>
                </uni-card>    
            </view>

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

在uni-app中，如果你想使用v-for来生成多个view class="container"的card，你可以将v-for放在外部包裹的view上，然后在内部循环生成每个card。每个card内部的结构可以按照你的需求进行布局。由于每个组件确实只能有一个根元素，你需要确保每个card内部的所有内容都在一个根元素下。这可以通过在外部使用view元素来实现。这是一个简单的例子来展示如何操作：

<template>
  <view class="container">
    <view v-for="(item, index) in cardsData" :key="index" class="card-container">
      <uni-card :title="item.title" :extra="item.extra" :thumbnail="item.avatar" @click="onClick">
        <!-- 这里可以根据你的需求添加更多的内容和布局 -->
        <!-- 例如，你可以使用slot来添加actions -->
        <view slot="actions" class="card-actions">
          <!-- 这里是actions的内容 -->
        </view>
      </uni-card>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cardsData: [ // 这是你的cards数据数组，可以根据实际需求修改数据结构和内容
        { title: 'High', extra: '14', avatar: '...' }, // 示例数据，根据实际情况替换...
        // 其他卡片数据...
      ],
    };
  },
  methods: {
    // 这里可以定义你的方法，如onClick和actionsClick等
  },
};
</script>

在这个例子中，我使用了v-for="(item, index) in cardsData"来遍历cardsData数组中的每一项数据，并为每一项数据生成一个uni-card。每个uni-card根据当前的item数据进行渲染。你可以根据需要调整数据结构和内容。这样你就可以生成多个带有不同内容的卡片了。