如何在 Vue.js 中加载页面后使用 $http.get 中的数据？

Question

我不知道如何在 $http.get 请求完成后执行 Vue.js 中的函数。在下面的示例中，我想在页面加载后立即自动 select foobar 的一个元素，但这仅在出现警报时有效。

new Vue({

    el: '#foo',

    data: {
        foobar: [],
        foobar_selected: []
    },

    ready: function() {
        this.fetchFoobar();
        alert('silly');
        this.selectFoobar(2);
    },

    methods: {
        fetchFoobar: function () {
            this.$http.get('foobar_to_fetch', function (foobar_fetched) {
                this.foobar = foobar_fetched;
            })
        },
        selectFoobar: function (index) {
            this.foobar_selected.push(this.foobar[index]);
        }
    }

});

-

<div id="foo">

    <h2>Foobars</h2>
    <table>
        <tr v-repeat="foobar">
            <td>{{ id }}</td>
            <td>{{ name }}</td>
            <td><button v-on="click: selectFoobar($index)">select</button></td>
        </tr>
    </table>

    <h2>Selected Foobars</h2>
    <table>
        <tr v-repeat="foobar_selected">
            <td>{{ id }}</td>
            <td>{{ name }}</td>
        </tr>
    </table>

</div>

这里https://github.com/vuejs/vue-resource说~~get的第三个参数~~是success，但我不明白我是怎么想的在这种情况下使用它。至少这行得通：

this.$http.get('foobar_to_fetch', function (foobar_fetched) {
    this.foobar = foobar_fetched;
}, alert('useless'));

但这不是：

this.$http.get('foobar_to_fetch', function (foobar_fetched) {
    this.foobar = foobar_fetched;
}, this.selectFoobar(2));

在 Vue.js 中执行此操作的正确方法是什么？

我正在使用 Vue 0.11.10 和 Vue-resource 0.1.16。

Answer 1

get 具有以下签名：

get(url, [data], [success], [options])

data在方括号中，表示该参数可选。由于 data 定义为：

Object|string - Data to be sent as the request message data

您不是将object/string作为第二个参数传递给函数。这意味着您传入的第二个参数被解释为成功回调函数！它不一定是第三个参数！

如果你这样做：

this.$http.get('foobar_to_fetch', function(data, status, request) {
  this.foobar = data;
  this.selectFoobar(2);
});

理论上应该可以。这只是基于我对您在问题中链接的 Vue 文档的一瞥。

如何在 Vue.js 中加载页面后使用 $http.get 中的数据？

How to use data from $http.get after page load in Vue.js?

javascript

ajax

vue.js