I have a page with many help buttons.
When a button is clicked I get with axios the help, returned as json (component vue-ob-button-help)
How can I update a help div (component vue-ob-help) with the return value and slide it down
How can I pass data from vue-ob-button-help to vue-ob-help ?
so far I have in a page.php
...
<vue-ob-button-help help-id=12></vue-ob-button-help>
<vue-ob-help help-id=12"></div>
...
<vue-ob-button-help help-id=25></vue-ob-button-help>
<vue-ob-help help-id=25></div>
and in js .
Vue.component('vue-ob-help', {
props: ['helpId'],
methods: {},
template: '<div class="help-block"></div>'
});
Vue.component('vue-ob-button-help', {
props: ['helpId'],
methods: {
getHelp: function (event) {
var e = event.currentTarget;
var id = this.helpId;
axios.get("/a_help/help?id=" + this.helpId)
.then(function (r) {
if (r.data.label) {
if (r.data.linkUpdate) {
r.data.label = '<a href="' + r.data.linkUpdate + '" class="float-right ob-btn-link mr-3"><i class="fas fa-pencil-alt"></i></a>' + r.data.label;
}
r.data.label = '<button class="close" type="button">×</button>' + r.data.label;
// this is what is working with Jquery and I want to change it to vue
//
// var target = '#help_' + this.helpId;
// $(target).html(r.label).slideDown();
}
})
.catch(function (error) {
console.log(error);
});
}
},
template: '<button type="button" v-on:click="getHelp($event)">help</button>'
});