[英]How do I use outsourced and editable scripts in Nuxt.js?
I am currently developing a website with Nuxt. 我目前正在与Nuxt合作开发一个网站。 A certain javascript
file should be editable after building to change the content of a table. 构建后更改表格内容后,某个javascript
文件应可编辑。 Does anyone have an idea how I can do this? 有谁知道我该怎么做?
Up to now I tried to include the javascript
file as plugin without success. 到目前为止,我尝试将javascript
文件作为插件包含在内,但没有成功。 Furthermore, I also failed the attempt to swap the script as follows: 此外,我也未能按如下所示交换脚本:
<!-- my-component.vue -->
<template>
<div>This is a Text!</div>
</template>
<script src="./my-outsourced-script.js"></script>
Currently my Code looks like this: 目前,我的代码如下所示:
Bootstrap-Vue table: Bootstrap-Vue表:
<b-table
borderless
striped
hover
responsive
:sticky-header="stickyHeader"
:items="folderPermissions"
:fields="folderGroups"
>
</b-table>
Content to be swapped out: 换出的内容:
export default {
data() {
return {
stickyHeader: true,
keyword: '',
sortBy: 'xxx',
sortDesc: false,
folderGroups: [
{
key: 'drive',
stickyColumn: true,
label: ' ',
isRowHeader: true
},
...
],
folderPermissions: [
{
drive: 'Some Text',
id: 0,
a: 1
},
...
]
}
}
}
My wish would be to have folderGroups
and folderPermissions
in the code shown above in an outsourced javascript
file to easily modify them and see the changes on the website. 我希望在外包的javascript
文件中的上面显示的代码中具有folderGroups
和folderPermissions
,以轻松地对其进行修改并在网站上查看更改。
Like you do, or if you try to import your js file with your data like import { folderGroups, folderPermissions} from './my-outsourced-script.js
, you cannot change the file without rebuild your nuxt app. 就像您这样做一样,或者如果您尝试使用import { folderGroups, folderPermissions} from './my-outsourced-script.js
类的数据导入js文件,则无法在不重建nuxt应用程序的情况下更改文件。
Try to build with your file as below: 尝试使用以下文件进行构建:
{
"folderGroups": [
your datas
],
"folderPermissions": [
your datas
]
}
And dynamic import in your component: 在组件中动态导入:
data() {
folderGroups: [],
folderPermissions: []
},
mounted() {
this.$http.get('/js/my-outsourced-script.json').then((response) => { // no need `assets`
console.log(response.body)
this.folderGroups = response.body.folderGroups
this.folderPermissions = response.body.folderPermissions
}, function (error) {
console.log(error.statusText)
})
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.