如何在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组件

回答

相关问题