Question

我在html中有一个vuejs组件，它是从jquery ajax调用返回的，但它不会渲染组件。那么如何使vuejs从jquery渲染这个组件？

jquery代码示例：

<div id="main-box">
  <div class="box">BOX</div>
  <div class="box">BOX</div>
  <div class="box">BOX</div>
  <div class="box">BOX</div>
  <div class="box">BOX</div>

  <div class="box second-row">BOX</div>
  <div class="box second-row">BOX</div>
  <div class="box second-row">BOX</div>
  <div class="box second-row">BOX</div>
  <div class="box second-row">BOX</div>
</div>

以及data.view中返回的内容是：

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

但是当data.view被添加到html div时，它不会渲染组件。

Answer 1

如果我理解正确，您将从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

希望这可以帮助你：）

如何从jquery中动态添加html渲染vuejs组件

1 个答案: