Question

我可以在哪里放置此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>

Answer 1

是的，您只能将其放在内容元素上，而不能放在（v布局或模板标签）

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

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

Vue-放置v的位置

1 个答案: