• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

198
Vistas
fire function one time when element is created (pass to methods) / VueJS

I'm working with BootstrapVue. First I want to explain my code shortly:

I have a v-for with inputs, these I can create as often as I want with a b-button -> addElement. Or I can select an item from my b-dropdown - there I am checking the length of my selected and push the amount of my arrayLength as my inputs.

-> e.g. selected array = ['1111', '2222', '3333'] -> arrayLength = 3 -> 3 inputs

Now I need to get a function fired automatically (marked as ???) when exactly this case happend that I'm selecting something from my dropdown - e.g. is my arrayLength = 3, it should be fired 3 times with correct id, indexParent and indexChild. How can I solve that?

I need this above named parameters in my methods..

Thanks in advance!

<div v-for="(id, indexChild) in inputs" :key="indexChild">
  
  <b-dropdown text="Select" right variant="success">
    <b-dropdown-item v-for="(item, indexDropdown) in json" :key="indexDropdown" @click="trySomething(item.Number)">{{item.Name}}</b-dropdown-item>
  </b-dropdown>

  <b-button v-b-toggle="'newElement'+indexParent+indexChild">Element {{indexChild + 1}}></b-button>
  
  <b-collapse :id="'newElement'+indexParent+indexChild"
    <div ???="getValues(id, indexParent, indexChild)"> <!-- how can I fire this when created? -->
      <!-- Do some more code -->  
    </div>
  </b-collapse>
</div>


<!-- create new "item"-elements -->
<div>
  <b-button @click="addElement()">Add element</b-button>
</div>
methods: {
  addProduct() {
    this.inputs.push({})
  },

  trySomething(itemValue) {

    var array = [];
    const products = this.otherJSON.find((i) => i.Number === itemValue);
    for (let key in products.ID) {
      array.push(products.ID[key]);
    }
      
    this.getLengthArray = array.length;

    this.inputs.splice(0) //at first I need to delete all to push exact inputs based on arrayLength

    for (let i = 0; i < this.getLengthArray; i++) {
      this.inputs.push({});
    }
  },

  getValues(id, indexParent, indexChild) { //Here I need the parameters id, indexParent, indexChild
  }
},

data() {
  return {
    inputs: [{}],
  }
},

props: ["indexParent"]
about 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

I've just used:

<div v-if="getValues(id, indexParent, indexChild)" v-once></div>

and it worked out for me!

about 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda