Vue - 在哪里放置 v-for答案

【问题标题】：Vue - Where to put v-forVue - 在哪里放置 v-for
【发布时间】：2019-10-01 19:15:09
【问题描述】：

我可以把这个v-for 放在哪里，这样它就不会影响我的组件的样式？

这是我的v-for 声明”

<v-flex xs12 v-for="(rates, index) in weight_based_rates" :key="rates.id">

我已经在 template v-layout 和上面的 v-flex 上尝试过（我正在使用 vuetify）

它要么破坏我的布局，要么在将其放在 v-layout 的情况下，我收到一条错误消息，说我不能将它放在这些类型的元素上。

我需要访问那些文本和数字字段中的数据。

这是我的组件：

<template>
  <v-layout row wrap>
    <v-flex xs1 fill-height>
      <v-icon 
        medium 
        color="green darken-3"
        @click="addWeightComponent()"
      >add_circle_outline</v-icon>

      <v-icon
        medium
        color="red darken-4"
        @click=""
      >remove_circle_outline</v-icon>
    </v-flex>

    <v-flex xs4 pl-3 >
      <v-text-field
        :key="rates.id"
        color="purple darken-3"
        v-model="rates.rate_name"
        label="Shipping Rate Name"
        class="move-up"
      ></v-text-field>
    </v-flex>

    <v-flex xs1 pl-3>            
      <v-text-field
        type="number"
        color="purple darken-3"
        label="Min"

      ></v-text-field>
    </v-flex>

    <v-flex xs1 pl-3>            
      <v-text-field
        type="number"
        color="purple darken-3"
        label="Max"

      ></v-text-field>
    </v-flex>

    <v-flex xs3 offset-xs1>
      <v-text-field
        type="number"
        color="purple darken-3"
        label="Weight Based Rate Amount"

        :prefix="standard_currency_symbol"
        class="move-up"
      ></v-text-field>
     </v-flex>
  </v-layout>
</template>

【问题讨论】：

你想把它放在哪里？
@Phiter 在页面上尽可能“高”。所以我可以访问那些 v-text 字段中的数据

标签： vue.js vuetify.js

【解决方案1】：

是的，你只能把它放在内容元素上，而不是放在（v-layout 或模板标签）

<template>
  <v-layout row>
    <v-flex v-for="(item, index) in object">
     {{item}}
     <p>{{item.title}}</p>
    </v-flex>
  </v-layout>
</template>

根据循环中的有效内容包装您的内容。 ;)。希望这是有道理的。

【讨论】：