0

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>'
            });
2

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.