Javascript 从Vue.JS中的外部文件读取和显示JSON数据

我正在使用这个View.JS应用程序，其中我正在显示来自JSON的对话线程。当前代码如下所示：

const app = new Vue({
  el: "#app",
  data: {
      messages:[
      {
      name: "Support",
      message: "Hey! Welcome to support"
      },
      {
      name: "Me",
      message: "Hello there!"
      },
      {
      name: "Support",
      message: "What can I do for you?"
      }
],
  },
  template: `
    <div>
      <p v-for="message in messages"><b>Name: </b>{{message.name}} </br><b>Message: </b>{{message.message}}</br></p>
    </div>
  `
})

const-app=新的Vue({
el:“应用程序”，
数据：{
信息：[
{
名称：“支持”，
信息：“嘿！欢迎支持”
},
{
姓名：“我”，
留言：“你好！”
},
{
名称：“支持”，
信息：“我能为您做些什么？”
}
],
},
模板：`
名称：{{message.Name}
消息：{{message.message}}

`
})

---

现在，我希望将这些数据放在一个外部JSON文件（在同一目录中称为'data.JSON'）上，并具有相同的输出。有什么办法吗？？？

将json文件导入到文件中，然后循环使用

<script>
  import json from './json/data.json'
  export default{
      data(){
          return{
              messages: json
          }
      }
  }
</script>

从“./json/data.json”导入json
导出默认值{
数据（）{
返回{
消息：json
}
}
}

试试这个

messages.json

{
      messages:[
      {
        name: "Support",
        message: "Hey! Welcome to support"
      },
      {
        name: "Me",
        message: "Hello there!"
      },
      {
        name: "Support",
        message: "What can I do for you?"
      }
],
  }

App.vue

从“/messages.json”导入消息；
const app=新的Vue({
el:“应用程序”，
数据：messages.messages，
模板：`
名称：{{message.Name}
消息：{{message.message}}

`
})

有多种解决方案，但我相信您对Vue JS和学习Vue非常陌生，因此我会保持简单

添加一个文件data.json

将Js文件更新为

const app = new Vue({
    el: "#app",
    data: {
        messages: []
    },
    methods: {
        loadJSON(callback) {

            var xobj = new XMLHttpRequest();
            xobj.overrideMimeType("application/json");
            xobj.open('GET', './data.json', true)
            xobj.onreadystatechange = function () {
                if (xobj.readyState == 4 && xobj.status == "200") {
                    // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
                    callback(xobj.responseText);
                }
            };
            xobj.send(null);
        },
        init() {
            let that = this
            that.loadJSON(function (response) {
                // Parse JSON string into object
                var data = JSON.parse(response);
                that.messages = data.messages
            });
        }
    },
    mounted(){
        this.init()
    },
    template: `
      <div>
        <p v-for="message in messages"><b>Name: </b>{{message.name}} </br><b>Message: </b>{{message.message}}</br></p>
      </div>
    `
})

const-app=新的Vue({
el:“应用程序”，
数据：{
信息：[]
},
方法：{
loadJSON（回调）{
var xobj=新的XMLHttpRequest（）；
重写emimetype（“application/json”）；
open（'GET'，'./data.json'，true）
xobj.onreadystatechange=函数（）{
if（xobj.readyState==4&&xobj.status==200）{
//要求使用匿名回调as.open将不会返回值，而只是在异步模式下返回未定义的值
回调（xobj.responseText）；
}
};
xobj.send（空）；
},
init（）{
让它=这个
loadJSON（函数（响应）{
//将JSON字符串解析为对象
var data=JSON.parse（响应）；
that.messages=data.messages
});
}
},
安装的（）{
this.init（）
},
模板：`
名称：{{message.Name}
消息：{{message.message}}

`
})

---

loadJSON只是一个基本的HHTP请求，从json文件加载数据。在init callback内部，您可以将数据设置为local instant

我得到了这个错误：

VM57:2未捕获的语法错误：JSON中的意外标记m位于main.JSON.parse（）的位置9处，位于XMLHttpRequest.xobj.onreadystatechange（main.js:15）

知道为什么吗？使用我发布的JSON吗！！工作很有魅力！是的，明白了！谢谢记住你的答案！

const app = new Vue({
    el: "#app",
    data: {
        messages: []
    },
    methods: {
        loadJSON(callback) {

            var xobj = new XMLHttpRequest();
            xobj.overrideMimeType("application/json");
            xobj.open('GET', './data.json', true)
            xobj.onreadystatechange = function () {
                if (xobj.readyState == 4 && xobj.status == "200") {
                    // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
                    callback(xobj.responseText);
                }
            };
            xobj.send(null);
        },
        init() {
            let that = this
            that.loadJSON(function (response) {
                // Parse JSON string into object
                var data = JSON.parse(response);
                that.messages = data.messages
            });
        }
    },
    mounted(){
        this.init()
    },
    template: `
      <div>
        <p v-for="message in messages"><b>Name: </b>{{message.name}} </br><b>Message: </b>{{message.message}}</br></p>
      </div>
    `
})