无法从 api 控制器 js 文件中获取数据以使用 Vue.js 应用程序在 Sails js 中查看 ejs 文件

Question

我正在使用 Vue.js 应用程序开发 Sails（最新版本 1.x），在我的 names.page.js 中，我有

data: { names : [], //… },

beforeMount: function() { 
// Attach any initial data from the server.
 _.extend(this, SAILS_LOCALS);
 this.names = [{id: 1, name: 'abc'}, {id:2, name: 'xyz'}]
 },

我可以成功进入names.ejs 并显示对象的名称数组。

<pre>{{names}}</pre>

现在我把names.page.js中的this.names = [{id: 1, name: 'abc'}, {id:2, name: 'xyz'}]代码去掉，移到view-names.js，如下图：

 fn: async function () {
    var sampleNames = [{id: 1, name: ‘abc’}, {id:2, name: ‘xyz’}]
    // Respond with view.
    return {
    names : sampleNames
    }

    }

但是在我的 names.ejs 中，当我给出 <pre>{{names}}</pre> 时，我得到的输出为空数组 []，实际名称数据（对象数组）没有显示。任何人都可以帮我解决我哪里出错了。

Answer 1

view-names.js 看起来像一个动作，所以它不会直接向 ejs 模板发送数据。

您必须使用 names.page.js，它是 names.ejs 视图的页面实例。

您可以在操作中使用 sampleNames，然后将结果发送到 names.page.ejs 变量，而该变量又可以从视图 names.ejs 中访问

当然，

首先构建你的变量并将其发送到页面实例

查看名称.js： names = [{id: 1, name: 'abc'}, {id:2, name: 'xyz'}] return { mynames: names }

names.page.js（页面实例） 您在数据中设置了变量 data: { mynames: {} }

names 从操作 view-names.js 中填充

现在您可以在视图中使用它，例如在 v-for 循环中

<ul v-for="name in names"> <li>{{ name }}</li> </ul>