Hide the first button, dynamically VUE JS

Asked

Viewed 212 times

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>&nbsp;

              <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>&nbsp; 

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

    v-if="mostrar && index> 0"

  • Pq does not use css and only takes first-Child

  • @Marconi Thanks, it worked, put as answer I mark with solved!! : D

  • @hugocsl, Hello if you want to leave an example, I would appreciate!!

  • @iagosoares are worth, need not.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.