[Vuejs]-How to pass @click(data ) props to fill form which have another component in Vue

by

0👍

One of approaches is to use events:

 //this  parent component
     <a href="#" @click="albumEdit(album)"></a>
 ...
<publishalbum-component @clickedButton="albumEdit(album)"> </publishalbum-component>
...
methods: {
  albumEdit(album) {
    this.editMode = true;
    this.form.reset();
    this.form.clear();
    this.form.fill(album);
  }
}
//in child component emit an event and a parent component shuld receive it and call the albumEdit function
  this.$emit('clickedButton')

Another approach:

 //this  parent component
     <a href="#" @click="albumEdit(album)"></a>
...
 ...
<publishalbum-component :clickedButton="albumEditCallback"> </publishalbum-component>
methods: {
  albumEditCallback() {
    this.albumEdit(this.album) // depends on where you store an album object
  },
  albumEdit(album) {
    this.editMode = true;
    this.form.reset();
    this.form.clear();
    this.form.fill(album);
  }
}

//in child component execute this method
  this.clickedButton()

Leave a comment