V
V
Vlad Sadovnik2021-07-12 02:05:34
Vue.js
Vlad Sadovnik, 2021-07-12 02:05:34

Is rendering components by v-for real?

Hello, I want to draw components by div v-for, but it doesn’t even work)

<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>

Here is my code on how to draw, well, there the counter can be a healer like counter = 1 and buttons counter++ counter--

Answer the question

In order to leave comments, you need to log in

1 answer(s)
D
Dmitry, 2021-07-13
@dastanaron_dev

Most likely your problem is related to reactivity. Here it is written in detail and in Russian how to make objects and how arrays are reactive in your case.
I could not read your code properly, but I think that you need to create a method, for example clickHandler()
and in it:
this.$set(this.counter, indexOfItem, newValue)

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question