如何使用Nuxt

时间:2018-10-16 23:15:04

标签: vue.js nuxt.js

我正在尝试使用Nuxt构建服务器端可排序表,我希望能够在Vue data中指定默认的排序列和方向,并在{{ 1}}函数。像这样:

asyncData

但是似乎<script> export default { async asyncData ({ $axios, params }) { const things = await $axios.$get(`/api/things`, { params: { sort_column: this.sortColumn, sort_ascending: this.sortAscending, } }); return { things }; }, data () { return { sortColumn: 'created_at', sortAscending: true } }, // ... } </script> 尚不可用,因为尚未定义datathis.sortColumn。当运行this.sortAscending时如何访问这些默认值,同时在用户与页面交互时也允许更改它们。 (或者,有什么更好的方法来构造它?)

注意:这个问题是here提出的,但是被接受的答案与这种情况无关。

1 个答案:

答案 0 :(得分:1)

您可以将其全部返回到asyncData中。例如。像这样的东西:

async asyncData ({ $axios, params }) {
    const sortColumn = 'created_at'
    const sortAscending = true
    const things = await $axios.$get(`/api/things`, {
      params: {
        sort_column: sortColumn,
        sort_ascending: this.sortAscending,
      }
    });
    return { things, sortColumn, sortAscending };
  },

它的行为会像您想要的那样。