Hiroio
@Hiroio
18 лет живу в Украине

Отрисовка компонентов по v-for реально?

Здраствуйте я хочу отрисовать компоненты по div v-for но чет не идёт)
<div v-for="n in this.counter" v-bind:key="n">
  <v-row>
<!--  v-select for column   -->
    <v-col sm="3" lg="3" md="3" xl="3" class="pa-4">
      <v-select :key="n" hide-details label="SelectColumn"></v-select>
    </v-col>
<!-- v-select   -->
    <v-col sm="2" lg="2" md="2" xl="2" align-self="center">
      <v-select
          :key="n"
          solo
          :items="operators"
          item-text="name"
          item-value="id"
          v-model="operators.id"
          hide-details
          label="Operator" >
        <!--   select operators    -->
        <template slot="selection" slot-scope="data">
          <v-flex xs2>
            <v-icon>{{data.item.icon}}</v-icon>
          </v-flex>
          <v-flex class='ml-1'>
            {{ data.item.name }}
          </v-flex>
        </template>
        <!--   items     -->
        <template slot="item" slot-scope="data">
          <v-list>
            <v-icon>{{data.item.icon}}</v-icon>
          </v-list>
          <v-list>
            <v-list v-html="data.item.name"></v-list>
          </v-list>
        </template>
      </v-select>
    </v-col>
<!--  input-field  -->
    <v-col sm="5" lg="5" xl="5" md="5" class="pa-4">
      <v-text-field :key="n" hide-details label="InputField"></v-text-field>
    </v-col>
<!--  btns  -->
    <v-col sm="1" md="1" lg="1" xl="1" align-self="center">
      <v-btn
          :key="n"
          icon
          color="blue"
          :disabled="length(this.counter) === 1"
          @click="this.counter--"

      >
        <v-icon size="35">mdi-minus</v-icon>
      </v-btn>
    </v-col>

    <v-col lg="1" xl="1" mg="1" sm="1" align-self="center">
        <v-btn
            :key="n"
            icon
            color="blue"
            @click="this.counter.concat([])"
        >
          <v-icon size="35">mdi-plus</v-icon>
        </v-btn>
      </v-col>

Вот мой код как отрисовать ну там коунтер может быть лечильником типок counter = 1 и кнопки counter++ counter--
  • Вопрос задан
  • 132 просмотра
Пригласить эксперта
Ответы на вопрос 1
dastanaron_dev
@dastanaron_dev
Developer web backend and frontend
Скорее всего ваша проблема связана с реактивностью. Вот здесь подробно и на русском языке написано, как нужно делать так, чтобы объекты и как в вашем случае массивы были реактивны.

Код ваш я так и не смог прочитать нормально, но я думаю, что вам нужно создать метод, например clickHandler()
и в нем:
this.$set(this.counter, indexOfItem, newValue)
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы