使用jQuery追加vue js组件 [英] append vue js component using jquery
本文介绍了使用jQuery追加vue js组件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用jquery将vue组件动态附加到我的应用程序中.但是什么也没发生，附加元素没有渲染.
I'm trying to dynamically append vue components to my app using jquery. But nothing happens and appended element not rendering.
<div id="app">
</div>
<script>
Vue.component('my-component', {
template: '<p>This is component</p>'
});
var Vue = new Vue({
el: '#app'
});
$(document).ready(function(){
$('#app').append('<my-component></my-component>');
})
</script>
我希望得到的结果是，在将<my-component></my-component>附加到#app时，将其添加到指定的模板中.
My desired result is that when appending <my-component></my-component> to #app, That become to specified template.
推荐答案
这对我有用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
<div id="agregame">
</div>
<button type="button" id="agregame_click">Add click</button>
<button type="button" v-on:click="addForm()">Add Form</button>
</div>
<script>
var vm =new Vue({
el: '#app',
data: {
range:0,
questions:[]
},
methods: {
addForm: function() {
vm.questions.push({
firstName: 'Walter',
lastName: 'White',
alias: 'Heisenberg'
})
var Profile = Vue.extend({
template:`
<div id="mount-point">
<h3>Guest Content</h3>
<ul>
<li v-for="question in questions">
{{question.firstName}}
</li>
</ul>
</div>
`,
data: function () {
return {
questions: vm.questions
}
}
})
// create an instance of Profile and mount it on an element
new Profile().$mount('#mount-point')
}
}
})
jQuery(document).ready(function($) {
$("#agregame_click").on("click", function(){
$("#agregame").html('<div id="mount-point"></div>');
vm.$forceUpdate()
vm.$emit('my-form');
alert()
})
});
</script>
</body>
</html>
这篇关于使用jQuery追加vue js组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
