0
I am trying to make the first generated button not appear, only from the second to the next. Is there any way to do this?
follows the Techo of the code:
HTML
<card class="col-md-5">
<div>
<h4 class="card-title">
Contato
</h4>
<br>
<l-button @click="addLine()"
size="sm" type="info" class=" floatRight" >Adicionar +</l-button>
<div v-for="(line, index) in lines" v-bind:key="index">
<l-button @click="removeLine()" v-if="mostrar"
size="sm" type="danger" class=" floatRight" >Remover -</l-button>
<fg-input v-model="line.telefone"
label="Telefone"
placeholder=""
class="floatLeft col-md-11">
</fg-input>
<fg-input v-model="line.celular"
label="Celular"
placeholder=""
class="floatLeft col-md-11">
</fg-input>
<fg-input v-model="line.email"
label="E-mail"
type="email"
placeholder=""
class="floatLeft col-md-11">
</fg-input>
</div>
</div>
</card>
JS
<script>
export default {
name: 'PhoneNumberLine',
data () {
return {
lines: [],
blockRemoval: true,
mostrar: false
}
},
watch: {
lines () {
this.blockRemoval = this.lines.length <= 1
}
},
methods: {
addLine() {
this.lines.push({
telefone: null,
celular: null,
email: null
})
if(this.lines.length > 1){
this.mostrar = true
}
},
removeLine (lineId) {
if (!this.blockRemoval) this.lines.splice(lineId, 1)
if(this.lines.length == 1){
this.mostrar = false
}
}
},
mounted () {
this.addLine()
}
}
</script>
v-if="mostrar && index> 0"
– Marconi
Pq does not use css and only takes first-Child
– hugocsl
@Marconi Thanks, it worked, put as answer I mark with solved!! : D
– iago soares
@hugocsl, Hello if you want to leave an example, I would appreciate!!
– iago soares
@iagosoares are worth, need not.
– Marconi