各位好
菜比八想問一下為何新增的節點Vue完全沒渲染到。還請大德們不吝指教，感謝QQ
https://imgur.com/a/cS7Oe7k
目前試了forceUpdated和mounted，確認了確實會重跑過mounted和updated的階段，但是跑完仍然沒有渲染上去
https://imgur.com/a/tTC4Yy6
補充一下，確認有註冊到component
https://imgur.com/a/UHS8TA9
已邀請的邦友 {{ invite_list.length }}/5
一個簡單的範例，有解決問題幫忙按個最佳解答，謝謝
<html>
<body>
<div id="app">
<button v-on:click="cl()">Add 1</button>
<div class="hr1"></div>
</div>
</body>
</html>
let c = {
template: '<h1>123456</h1>',
methods: {}
};
var vm = new Vue({
el: '#app',
methods: {
cl() {
let example = Vue.extend(c);
let component = new example().$mount();
document.querySelector('.hr1').appendChild(component.$el);
},
},
data: {},
});
這是另一種寫法，都是差不多的，看你喜歡哪一種
let c = {
template: '<h1>123456</h1>',
methods: {}
};
Vue.component('my-component', c);
var vm = new Vue({
el: '#app',
methods: {
cl() {
let component = new (Vue.component('my-component'))().$mount();
document.querySelector('.hr1').appendChild(component.$el);
},
},
data: {},
});
有可能是我的程度太差，怎麼感覺你是用了 JQuery 的 API @@
如果是這樣，你應該也不需要用 Vue 吧，直接做一個 Handler 就好了:
<button onclick="cl">Click me!</button>
var cl = function(){
// Write your methods here!
}
或是:
<button id="btn1">Click me!</button>
const btn1 = document.querySelector("#btn1");
btn1.addEventListener("click",()=>{
// Write your methods here!
})
然後認真回，你新增的節點會沒渲染到是因為 Vue 2.6 底層所使用的語法特性，請參考該問答串，希望能幫到你><
因為你用截圖附上程式碼，我就沒有貼到 codepen 上測試了，我猜測你是想問新增的節點沒有被 Vue observe ，如果不是，再麻煩你用 Markdown 語法附上程式碼。
iThome鐵人賽
看影片追技術