1

I have the following Popper.js popup in which I have a button on which I want to attach a Vue.js click event.

However, while the click event works outside the popup, it doesn't work instead the popup.

How can I get changeText() to work inside the popup as well?

https://jsfiddle.net/edwardtanguay/jxs5nmxs

HTML:

<div id="app">
  <div>
    Message: {{message}}
  </div>
  <div>
  <button @click="changeText()">outside works</button>
  </div>
  <hr/>
    <a href="#" 
       id="example" 
       class="btn btn-primary" 
       rel="popover"
       data-original-title="Test Form"
       data-content='
       <div class="form-group">
        <label for="exampleInputPassword1">Name</label>
        <input type="text" class="form-control">
       </div>
       <button @click="changeText()" class="btn btn-success">Submit</button>
       '>Fill out form</a>
</div>

JavaScript:

var vm = new Vue({
    el: '#app',
  data: function() {
    return {
        message: 'hello'
    }
  },
  methods: {
    changeText: function() {
        alert('test');
    }
  }
});

$(function () {
    $('#example').popover({html: true});
});

ADDENDUM:

Edward Tanguay
  • 189,012
  • 314
  • 712
  • 1,047

1 Answers1

-1

The reason it doesn't work is because popover injects it's own html dynamically and obviously Vue does not compile this template.

You'll have to use popover events to overcome this, it's a bit hacky but i don't see any other way:

var vm = new Vue({
  el: '#app',
  data: function() {
    return {
      message: 'hello'
    }
  },
  methods: {
    changeText: function() {
      alert('test');
    }
  },
  mounted: function() {
    var self = this;
    $('#example').popover({
        html: true
      })
      .on('hidden.bs.popover', function() {
        self.changeText()
      }).parent().delegate('.btn-success', 'click', function() {
        $('#example').popover('hide')
      });
  }
});

https://jsfiddle.net/vangj1uc/

Tomer
  • 17,787
  • 15
  • 78
  • 137
  • But this code also has the unwanted effect, that the changeText() function is also executed when one clicks on the original "Fill out form"-Button, which should actually simply close the popover. – Edward Tanguay Aug 31 '17 at 11:59
  • I just gave you an example on how it can be performed, I don't know what your logic is, you can use 2 different functions if the functionality collide – Tomer Aug 31 '17 at 12:02
  • I'm trying to understand the code. Where did you get `hidden.bs.popover`? If I change it to e.g. `hidden.bs.popoverx`, the submit button hides the popup. But I don't see where `hidden.bs.popover` is referring to. – Edward Tanguay Aug 31 '17 at 12:30
  • ok, found it: hidden.bs.popover, "Occurs when the popover is fully hidden (after CSS transitions have completed)" – Edward Tanguay Aug 31 '17 at 12:45
  • It looks like there is going to be too much that doesn't work, e.g. `v-model` doesn't work inside the popup: https://jsfiddle.net/edwardtanguay/f4eavh7y/ – Edward Tanguay Aug 31 '17 at 13:01
  • yes, obviously vue does not work at all within the popover template, you'll have to manually collect the data and then assign it to the vue instance yourself. You can try vuestrap, maybe they have a working version: https://yuche.github.io/vue-strap/ , or you can write one yourself, should be pretty easy – Tomer Aug 31 '17 at 13:25