Answer the question
In order to leave comments, you need to log in
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>
Answer the question
In order to leave comments, you need to log in
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 questionAsk a Question
731 491 924 answers to any question