我想导入 json 文件,我想我做到了,但我有一个聊天机器人,我想要 json 文件中的问题和答案,但它不起作用。
它可以在没有 json 文件的情况下工作,我将所有数据放入同一个文件中,但它不可读,这就是为什么我想将所有数据放入 json 文件中。
模板
<template>
<div class="container">
<div class="container max" ref="scroll">
<div class="container con">
<div class="row ml-0 mt-3">
<p>{{this.file.welkom}}</p>
</div>
<p id="chatLog" class="chatLog font-weight-bold"></p><br>
</div>
</div>
<div class="row mt-4">
<div class="col">
<input id="userBox" class="inputChat" type="text" @keyup.enter="talk()" v-model="msg" required>
</div>
<div type="submit" value="Send" class="btn btn-primary mt-2 ml-2" @click="talk()">Send<img class="sendIcon" src="@/assets/icons/send.png"></div>
</div>
</div>
</template>
这是脚本文件
<script>
// eslint-disable-next-line
import json from './info.json';
export default {
data() {
return {
title: 'Chat bot',
file: this.json,
msg: ''
}
},
head: {
title: function () {
return {
inner: this.title
}
}
},
methods: {
talk() {
var user = this.msg;
document.getElementById('chatLog').innerHTML += user + '<br>';
if (user != '') {
if (user in this.file) {
document.getElementById('chatLog').innerHTML += this.file[user] + "<br>" + "<br>";
} else {
document.getElementById('chatLog').innerHTML += 'I can\'t answer your question, type "help" I can only help you with that or you can go to the Faq page...<br>' + '<br>';
}
} else {
alert('Type text in');
}
console.log(this.msg);
this.msg = '';
const chatLogDiv = this.$refs.scroll;
chatLogDiv.scrollTop = chatLogDiv.scrollHeight
}
}
}
</script>
还有我的 info.json 文件
[
{
"welkom": "Welcome I will help you to answer your questions. If you want more info type 'help'.",
"help": "Working...",
"how do you login": "If you are on the 'Homepage' you see on the top a 'Login' button click on it, sign in with your email and password and you logged in.",
"how do you register": "1. Click on 'login' on the navbar. 2. On the right side you see a 'SIGN UP' button click on the button and you can register.",
"add internship": "1. You need a account and you need to be logged in.' + '<br>' +'2. When you logged in you see above your email on the right side you see 'Add internship' ' +'click on it.' + '<br>' +'3. Then you see some empty field you need to fill with your company information ' +'4. You can see how it is on the 'Preview design' and if everthing is good click on 'Add internship'.",
"edit a internship": "1. Go to your 'internship page'. Their you see a edit button if you click on it you can edit ' + 'your internship information."
}
]
最佳答案
快速浏览一下您的代码:
file: this.json,
应该像下面这样,'this'指的是Vue实例
file: json,
理想情况下,您的 json 应该如下所示(没有 []),因此您可以执行 this.file[user]
(否则,因为它是一个数组,所以您必须执行 this.file[0][用户]
)。
{
"welkom": "Welcome I will help you to answer your questions. If you want more info type 'help'.",
"help": "Working...",
"how do you login": "If you are on the 'Homepage' you see on the top a 'Login' button click on it, sign in with your email and password and you logged in.",
"how do you register": "1. Click on 'login' on the navbar. 2. On the right side you see a 'SIGN UP' button click on the button and you can register.",
"add internship": "1. You need a account and you need to be logged in.' + '<br>' +'2. When you logged in you see above your email on the right side you see 'Add internship' ' +'click on it.' + '<br>' +'3. Then you see some empty field you need to fill with your company information ' +'4. You can see how it is on the 'Preview design' and if everthing is good click on 'Add internship'.",
"edit a internship": "1. Go to your 'internship page'. Their you see a edit button if you click on it you can edit ' + 'your internship information."
}
关于javascript - Vue js将所有文本放入json文件并导入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61210312/