javascript - Vue Components and AJAX loaded HTML content - Stack Overflow

admin管理员组

文章数量:1313121

I have A Vue ponent which is basically a shorthand for plex HTML markup.

On initial load, Everything works fine.

I am using AJAX to load more of these ponents onto the page, The problem is that this ponent, after being loaded with AJAX, doesn't want to get piled into HTML I only get the un-rendered Vue ponent like below:

<ponent><slot>content</slot></ponent>

I have looked at Vuepile() and the render function but cannot figure out how to get this working or how to re-render? the ponents.

Hope that makes sense, Can anyone shed some light on what I should be doing here?

I have A Vue ponent which is basically a shorthand for plex HTML markup.

On initial load, Everything works fine.

I am using AJAX to load more of these ponents onto the page, The problem is that this ponent, after being loaded with AJAX, doesn't want to get piled into HTML I only get the un-rendered Vue ponent like below:

<ponent><slot>content</slot></ponent>

I have looked at Vue.pile() and the render function but cannot figure out how to get this working or how to re-render? the ponents.

Hope that makes sense, Can anyone shed some light on what I should be doing here?

• javascript
• ajax
• laravel
• vue.js
• vue-ponent

Share Improve this question Follow asked Apr 19, 2017 at 15:22 J FoleyJ Foley 1,09811 gold badge2020 silver badges3535 bronze badges 1

• Can we see some code? Not quite sure what you are doing. – Bert Commented Apr 19, 2017 at 15:41

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You should let your data drive the view.

In other words, let's assume you have the following html:

<div id="app">
    <ponent></ponent>

    <!-- the following ones are inserted via ajax -->
    <ponent></ponent>
    <ponent></ponent>
</div>

and js:

var app = new Vue({
  el: '#app',
  data: {
    foo: 'bar',
  }
})

You are probably making the ajax request and inserting manually the <ponent></ponent> into the html. That's not the way you should work with Vuejs.

The way you let your data drive the view is, well, creating the needed data:

var app = new Vue({
  el: '#app',
  data: {
    foo: 'bar',
    ponents: [
        {}, //ponent related data
        ...
    ]
  },

  ponents: {
    ponent,
  },

  ajaxRequest() {
    //this should push into your ponents array
    // example:
    $.ajax().done(function(data) {
        this.ponents.push(data);
    })
  }
}) 

In this code, I've added a new array (ponents) to the data that will store the ponents I want to render in my view. When I fetch ponents via ajax I add them to this array. Now, if I change the html to:

<div id="app">
    <ponent v-for="ponent in ponents" data="ponent">
    </ponent>
</div>

whenever the ponents array is updated, Vue will automatically add them to the view.

Using the functions "extend" and "$mount":

axios.get(url).then((response) => {
    var MyComponent = Vue.extend({
        template: response.data
    })

    var piled = new MyComponent().$mount()

    $('#div').append(piled.$el)
})

本文标签： javascriptVue Components and AJAX loaded HTML contentStack Overflow