我正在尝试动态附加vue使用 jquery 将组件添加到我的应用程序中。但什么也没有发生，附加元素没有渲染。
<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> to #app，即成为指定模板。
这对我有用
<!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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
