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

Question

我有这个 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>
  `
})

现在我想将这些数据保存在外部 JSON 文件（在同一目录中称为“data.json”）并具有相同的输出。关于我如何做到这一点的任何想法？

Answer 1

尝试这个

消息.json

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

应用程序

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

有关更多信息代码和框示例