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

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?

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).

I don't understand why there is a need to use jquery along with Vue. If you are using Vue, then just write in Vue. If you are using ng2/1, then just write in ng2/1.x

This is a big reality and I hate to break it to all Jquery guys:- As ng5 and by mid-2018 i think ng9 is going to come, no ones going to code in jquery; it will be either jquery alone -OR- angular alone -OR- Vue.js alone.

Meanwhile, all you jquery folks can continue making a hotchpotch of jquery+ng or jquery+Vue, but that is definitely NOT recommended.

I would advise to moveon from jquery, just to stay relevant. Follow this discussion: Vue.js and jQuery?

Jquery: take it behind the barn and shoot it. The faster you quit a bad idea, the sooner you can start another idea that shows more promise.

ok, i substitued jquery with vue-resource. Now everything works, thank you !!

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

var app = new Vue({
    el: '#app',
    data: {
        items: []
    },
    created: function () {
        this.getFilms();
    },
    methods: {
        getFilms: function () {
            this.$http.get(remoteUrl).then(response => {
                this.items = response.body;
            }, response => {
                alert(response);
            });
        }
    }
});