AJAX和Vue.js 2无法正常工作

Question

I'm trying to use AJAX with Vue.js 2:

let remoteUrl = '...................';

var app = new Vue({
    el: '#app',
    data: {
        items: []
    },
    created: function () {
        this.getFilms();
    },
    methods: {
        getFilms: function () {
            $.ajax({
                type: "GET",
                url: remoteUrl
            }).done(function (res) {
                console.log(res);
                self.items = res;
            }).fail(function (err) {
                alert("ERRORE: " + err);
            });
        }
    }

});

this is the html:

            <table>
                <tbody>
                    <tr v-for="item in items">
                        <td>{{item.nome}}</td>
                        <td>{{item.data}}</td>
                        <td>{{item.size}}</td>
                        <td>{{item.ext}}</td>
                    </tr>
                </tbody>
            </table>
        </div>

i see the output in console. But the table remains empty. I do not see any errors in the AJAX call. I tried both with created and with mounted. why?

Answer 1

You just need to add let self = {} below your remoteUrl declaration, unless you already declared self somewhere else.

This should fix the problem (if nome, data, size and ext were properties of your res that is).