AJAX 和 Vue.js 2 不工作

Question

我正在尝试将 AJAX 与 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);
            });
        }
    }

});

这是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>

我在控制台中看到了输出。 但桌子仍然是空的。 我在 AJAX 调用中看不到任何错误。 我尝试了created和mounted。 为什么？

Answer 1

您只需在 remoteUrl 声明下方添加 let self = {}，除非您已经在其他地方声明了 self。

这应该可以解决问题（如果 nome、data、size 和 ext 是您的 res 的属性）。

Answer 2

我不明白为什么需要将 jquery 与 Vue 一起使用。 如果您使用的是 Vue，那么只需使用 Vue 编写即可。 如果您使用的是 ng2/1，则只需写入 ng2/1.x

这是一个很大的现实，我不想把它告诉所有 Jquery 人：- 作为 ng5，到 2018 年年中，我认为 ng9 即将到来，没有人会在 jquery 中编写代码；它将是单独的 jquery -或-单独的 angular -或-单独的 Vue.js。

同时，所有 jquery 人都可以继续制作 jquery+ng 或 jquery+Vue 的热点，但绝对不推荐这样做。

我会建议离开 jquery，只是为了保持相关性。 关注这个讨论： Vue.js and jQuery?

Jquery：把它带到谷仓后面射击它。 你越快放弃一个坏主意，你就能越早开始另一个更有希望的想法。

Answer 3

好的，我用 vue-resource 替换了 jquery。 现在一切正常，谢谢！！

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);
            });
        }
    }
});