如何在jquery中動態添加html中的vuejs組件

我從jquery ajax調用返回的html中有一個vuejs組件，但它不呈現組件。所以如何讓vuejs從jquery渲染這個組件？如何在jquery中動態添加html中的vuejs組件

jQuery代碼示例：

$.post(baseURL + "media", postData, function (data) { 
     if(data.status == true) { 
      $('#media_lib_app').html(data.view); 
     } 
});

和data.view內回到的是：

<test-component></test-component>

但當data.view被添加到HTML DIV它不會呈現組件。

來源

2017-08-07 m_elbardeny

你能告訴你的代碼？ – thanksd

實際的代碼太大，因爲它是一個依賴於jQuery的舊項目，但這是在後 –

中解釋的確切情況如果您可以提供[最小化，完整和可驗證]（https://stackoverflow.com/help/mcve）您的問題的例子。 – thanksd

如果我理解正確，您會從您的AJAX調用中獲取自定義組件的標籤，並且想要構建一個Vue組件。

所以我們可以說這是你的<test-component>：

Vue.component('test-component', { 
    template: "<p>I am the test component template</p>", 
    methods: { 
     // Component logic... 
    } 
});

現在，在您的應用程序的某個地方，你讓AJAX調用：

$(document).ready(function() { 
    var html = '<test-component></test-component>'; 
    var url = "https://jsonplaceholder.typicode.com/posts"; 

    $.get(url, function (data) { 

    var res = Vue.compile(html) 
    new Vue({ 
     render: res.render, 
     staticRenderFns: res.staticRenderFns 
    }).$mount('#media_lib_app') 

    }.bind(this)); 
})

你的元件安裝點：

<div id="media_lib_app"></div>

更多關於.compile：

https://vuejs.org/v2/api/#Vue-compile

注意：Vue.compile()僅在完整版本中可用。

你可以在這裏找到一個工作示例：

https://jsbin.com/motuvokeha/edit?html,js,output

希望這可以幫助你:)

來源

2017-08-07 21:02:40

是的，但問題是，ajax調用發生在jquery代碼不vue代碼，在這個時候，我們不能改變這部分vue所以問題是如何做你寫的，但從jquery不vue –

@m_elbardeny我編輯答案。正如你現在看到的，代碼只是在jQuery塊中完成的。但是，要使用Vue組件，您需要先註冊它，這樣Vue就知道該如何處理它。我希望你明白，你不能只是得到一個HTML標籤，並期望Vue神奇地想出來的東西:) 這就是說，在AJAX回調中，您可以安裝並編譯已經註冊的組件。我相信沒有別的辦法。希望這次我得到它:) –

這項工作，如果我使用webpack？我試過了，javascript拋出錯誤Vue沒有定義 –

如何在jquery中動態添加html中的vuejs組件

回答

相關問題