从JSON文件NodeJS在vueJS中显示数组

Question

所以我有这个带有以下数据的JSON文件：

{
    "manufacturers": ["Sony", "Microsoft", "Nintendo", "Kita"]
}

这是我在NodeJS应用中获取它的方式：

let uploadrawdata = fs.readFileSync('./config/upload.json');
let uploaddata = JSON.parse(uploadrawdata);

然后渲染视图：

res.render('users/upload', {uploaddata});

在那之后，在我的VueJS脚本中，我像这样添加它：

manufacturers: [{{uploaddata.manufacturers}}],

在控制台中，如下所示： manufacturers: [Sony,Microsoft,Nintendo,Kita]

我需要它显示如下：manufacturers: ['Sony', 'Microsoft', 'Nintendo' ,'Kita']

有人可以帮助解决这个问题吗？

Answer 1

似乎您正在使用mustache作为模板引擎。

以这种方式呈现数组时，mustache将对其进行迭代，并将数组的值与当前输出连接在一起。这就是为什么您的报价丢失的原因。就像这样：

var output = 'Sony' + 'Microsoft'

使用普通JS。最后一个字符串中缺少引号。

如果要将数据作为JS对象发送，则可以执行以下操作

res.render('users/upload', {uploaddata: JSON.stringify(uploaddata)});

并在Vue端进行解析

manufacturers: JSON.parse('{{uploaddata}}').manufacturers,

请注意{{uploaddata}}周围的撇号。同样，小胡子将按原样打印字符串，而无需将其嵌入引号/撇号中。