從 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?"
      }
],
  }

應用程序

 import messages from "./messages.json"; const app = new Vue({ el: "#app", data: messages.messages, template: ` <div> <p v-for="message in messages"><b>Name: </b>{{message.name}} </br><b>Message: </b>{{message.message}}</br></p> </div> ` })

有關更多信息代碼和框示例

Answer 2

將您的 json 文件導入您的文件並循環播放

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

Answer 3

有多種解決方案，但我相信您對 Vue JS 和學習 Vue 都很陌生，我會讓事情變得簡單。

添加文件 data.json

{
    "messages": [
        {
            "name": "AI",
            "message": "Hello Doctor"
        },
        {
            "name": "Shri",
            "message": "Hello there!"
        },
        {
            "name": "AI",
            "message": "Hope you are well. Today’s discussion shall be on treatment options to manage ..."
        }
    ]
}

將您的 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>
    `
})

loadJSON 只是一個基本的 HHTP 請求並從 json 文件加載數據。 在 init 回調中，您可以將數據設置為本地即時