javascript - 无法从 api Controller js 文件获取数据以使用 Vue.js 应用程序在 sails js 中查看 ejs 文件

标签 javascript vue.js ecmascript-6 sails.js

我正在使用 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>

现在我已经删除了 this.names = [{id: 1, name: 'abc'}, {id:2, name: 'xyz'}]来自 names.page.js 的代码并移至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> ,我得到的输出为空数组 [] ,实际名称数据(对象数组)未显示。任何人都可以帮助我哪里出错了。

最佳答案

view-names.js 看起来像是一个 Action ,所以它不会直接将数据发送到 ejs 模板。

您必须使用 names.page.js,它是 names.ejs View 的页面实例。

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

当然,

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

view-names.js: names = [{id: 1, name: 'abc'}, {id:2, name: 'xyz'}] return { mynames: names }

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

names 从 Action view-names.js 中获取

现在您可以在 View 中使用它,例如在 v-for 循环中

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

关于javascript - 无法从 api Controller js 文件获取数据以使用 Vue.js 应用程序在 sails js 中查看 ejs 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54304432/

相关文章:

vue.js - 如何在nuxt js中制作包含所有页面的压缩js文件

javascript - Vuex store模块状态下如何访问 'this'

javascript - 字符串的展开运算符

javascript - 尝试从 JSON 文件返回 URL

c# - 自定义 ASP.NET 控件中的 Begin/EndRequestHandler 多个处理程序

javascript - 为什么我的 Vue 方法没有引用正确的上下文(数据)?

javascript - 使用 JavaScript 突出显示和格式化代码片段

javascript - 在纯现代 javascript 中调试数组方法链中间结果

javascript - 使用 JavaScript 读取存储在用户计算机上的文件

javascript - 关闭后更改并保存信息窗口内的内容