appending vuejs data to a div-CodePudding

I have something I have been trying to do which is challenging. I have a simple div that gets appended to the top level on the click of a button. The issue is I want vuejs data appended inside of this div. I am not quite sure how to bind this data, I have tried using a simple expression, but no luck. Can someone please let me know how this can be solved--and with a div, not a bootstrap modal

new Vue({
  el: "#app",
  data: {
  chocs:[{"title":'a man tale'},{"title":'a boy tale'}]
    
  },
  methods: {
 handleTileClick: function(){
  alert(this.chocs[0].title);
     
   $("#fox").append(`<div id="popover-dialog"> data here {{this.chocs[0].title}}
</div>`);
   
   },
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div id="app">
  <h2>Todos:</h2>
 <button v-on:click="handleTileClick()">
 Click Me
 </button>
 <div id="fox">
 
 </div>
</div>

CodePudding user response：

Without JQuery, the Vue-way:

new Vue({
  el: "#app",
  data: () => ({
    chocs:[{"title":'a man tale'}, {"title":'a boy tale'}],
    titleToBeAppended: ''
  }),
  methods: {
    handleTileClick: function(){
        this.titleToBeAppended = this.chocs[0].title
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
<div id="popover-dialog">
<p>Data here: {{ titleToBeAppended }}</p>
<button v-on:click="handleTileClick()">Click Me</button>
</div>
</div>

CodePudding user response：

Using template literals:

new Vue({
  el: "#app",
  data: () => ({
    chocs:[{"title":'a man tale'}, {"title":'a boy tale'}]  
  }),
  methods: {
    handleTileClick: function(){
      alert(this.chocs[0].title); 
      $("#fox").append(
        `<div id="popover-dialog">data here: ${this.chocs[0].title}</div>`
      );
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div id="app">
  <h2>Todos:</h2>
  <button v-on:click="handleTileClick()">Click Me</button>
  <div id="fox"></div>
</div>