Question

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

const app = new Vue({
  el: "#app",
  data: {
      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 ..."
      }
],
  },
  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

尝试一下

messages.json

<ng-container *ngIf="projectDetail">
<h5 class="card-title">Name: {{ projectDetail.project_name }}</h5>
...
// rest of the code
</ng-container>

App.vue

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

For More Info codesandbox example

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回调中，您可以将数据设置为本地即时

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

3 个答案: