Tengo algo que he estado tratando de hacer que es un desafío. Tengo un div simple que se agrega al nivel superior con solo hacer clic en un botón. El problema es que quiero que se agreguen datos de vuejs dentro de este div. No estoy muy seguro de cómo vincular estos datos, he intentado usar una expresión simple, pero no tuve suerte. ¿Puede alguien decirme cómo se puede resolver esto, y con un div, no un modal de arranque?
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>Sin JQuery, el 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>Usando 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>