Alun
161
3
Vue

Bootstrap's popover dinamically

Posted 10 months ago by Alun

I'm making a form in which every field depends on the previous one, so it is mostly made in ajax: when a button is clicked, I'm calling the server via axios to ger a random data, and then this button gets disabled, and the next one gets enabled to repeat and get new data depending on the fist random data.

One of the fields I'm getting is a description ment to be in a popover, but of course it cannot be set at creation time as it's comig from the server later on. The code I'm trying to use unsuccessfully is as follows:

    <!-- template.blade.php -->
    <!-- there are several fields like this one -->
    <div class="col-md-3">
        <div id="myField_container" class="row">
            <div class="col-md-6">
                {{ Form::label('myField', __('myField')) }}
            </div>
            <div class="col-md-6">
                {{ Form::customButton(__('button'), ['field'=>'myField', 'activate'=>'nextField', '@click'=>'getRandomData']) }}
            </div>
            <div class="col-md-6">
                {{ Form::text('myField', old('myField'), ['class'=>'form-control', 'disabled'=>'disabled', 'v-model'=>'myVar.myField.name']) }}
            </div>
        </div>
    </div>
    // the_js_file.js
    app = new Vue({
        data: {
            myVar: {
                myField: {
                    id: null,
                    name: null,
                    description: null
                }
            }
        }
        methods: {
            setPopup(el, field){
               $(el)
                   .html('<i class="fa fa-question-circle"></i>')
                   .prop('title', this.myVar[field]['name'])
                   .data('toggle', 'popover')
                   .popover({
                       content: this.myVar[field]['descripcion']
                   });
            },
            getRandomData(e){
                var rn = this.getRandomNumber();
                var url = this.url('getRandomData?randomNumber='+rn);
                
                axios.get(url).then(response => {
                    var data = response.data[0];

                    // this sets the properties properly
                    this.setProps(data, 'myField', ['id', 'name', 'description']);

                    // but this one is failling
                    this.setPopup(e.target, 'myField');
                    this.swapToNext(e);
                }).catch(error => {
                    console.log('error: ');
                    console.log(error);
                });
            }
        }
    });

As I've read, DOM cannot be modified in runtime because it's not evaluated by Vue. In this case, the idea is to change the button's content, which is happening, via JQuery's .html(), and add the popover to this "new" element.

Is there any way to achieve this?

Thank you all.

Please sign in or create an account to participate in this conversation.

Reply to

Use Markdown with GitHub-flavored code blocks.