Vue js 将所有文本放入一个json文件并导入

Question

我想导入 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."
    }
]

Answer 1

快速浏览您的代码：

file: this.json,

应该如下所示，'this' 指的是 Vue 实例

file: json,

理想情况下，您的 json 应该如下所示（不带 []），因此您可以使用 this.file[user]（否则，因为它是一个数组，所以您必须使用 this.file[0][user]）。

{
    "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."
}