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

Question

[Влад Садовник]

Здраствуйте я хочу отрисовать компоненты по 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--

Comments

[Дмитрий]

Сделайте подсветку синтаксиса, так глаза ломаются разобрать, что там такое

[Влад Садовник]

Дмитрий, всмысле как? мне нужно этот весь код в v-for закинуть это обычные 2 v-select и 1 text-field и 2 кнопки их нужно в фор добавить или как типо когда кнопку нажимал ещё один такой самый отрисовувался и все

[Влад Садовник]

ну мне просто интересно можно ли отрисовать динамические компоненты по кнопке додавания вот и все либо фором либо джава скриптом при этом ловить в-модели которые туда вписуются

[Дмитрий]

Влад Садовник, Конечно можно. Просто код без подсветки не хочется читать. Нет желания ломать свои глаза, если даже тот, кто задает вопрос не удосужился его оформить так, чтобы отвечающим было удобнее.

Возможно проблема здесь
this.counter.concat([])

попробуйте сделать явную перезапись массива. Там не во всех случаях vue реактивно протягивает изменения числа элементов в массиве, нужно явно перезаписывать массив.

Answer 1

[Дмитрий]

Скорее всего ваша проблема связана с реактивностью. Вот здесь подробно и на русском языке написано, как нужно делать так, чтобы объекты и как в вашем случае массивы были реактивны.

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