在Vue中显示JSON文件内容

<template>
  <div>
    <JsonDisplay :json-url="jsonUrl" />
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      jsonUrl: 'https://example.com/data.json',
    };
  },
};
</script>

<template>
  <div>
    <ul>
      <li v-for="(value, key) in jsonData" :key="key">
        <span>{{ key }}:</span>
        <span v-if="isObjectOrArray(value)">
          <JsonDisplay :json-data="value" />
        </span>
        <span v-else>{{ value }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    jsonUrl: String,
    jsonData: Object,
  },
  data() {
    return {
      jsonData: null,
    };
  },
  created() {
    if (this.jsonUrl) {
      this.fetchJsonData();
    }
  },
  methods: {
    fetchJsonData() {
      axios.get(this.jsonUrl)
        .then(response => {
          this.jsonData = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    },
    isObjectOrArray(value) {
      return typeof value === 'object' && value !== null;
    },
  },
};
</script>