Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Comercial
    • Calculadora

0

80
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"]
7 months 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!

7 months ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos