Vue.js展示JSON数据：仅显示site_id失败求助

看起来你的site prop实际上是一个JSON格式的字符串，而不是已经解析好的JavaScript对象——这就是为什么直接用{{ site.site_id }}取不到值的原因，因为字符串本身没有site_id这个属性。

你可以通过以下几种方式解决这个问题：

方法1：在父组件中提前解析JSON #

如果父组件是从后端接口或者其他地方拿到的JSON字符串，最好在传递给子组件之前就解析成对象：

// 父组件中的代码示例
import YourComponent from './YourComponent.vue';

export default {
  components: { YourComponent },
  data() {
    return {
      siteData: JSON.parse('{"id":274292982,"site_id":"2512016716"}') // 提前解析JSON字符串
    };
  }
}

然后父组件模板中传递解析后的对象：

<YourComponent :site="siteData" />

这样子组件里直接用{{ site.site_id }}就能正常访问属性了。

方法2：在子组件中通过计算属性解析JSON #

如果没办法在父组件处理，也可以在当前子组件里用计算属性来安全解析JSON：

<template>
  <div>
    <div class="card">
      <div class="card-header">
        <h4 class="card-title">Customer Infos</h4>
      </div>
      <div class="card-content">
        {{ parsedSite.site_id }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['site'],
  computed: {
    parsedSite() {
      // 先判断是否已经是对象，避免重复解析报错
      if (typeof this.site === 'object' && this.site !== null) {
        return this.site;
      }
      // 尝试解析JSON，同时捕获解析失败的异常
      try {
        return JSON.parse(this.site);
      } catch (error) {
        console.error('解析site JSON失败:', error);
        return {}; // 解析失败时返回空对象，避免页面报错
      }
    }
  },
  mounted () {
    console.dir(this.site); // 你可以在这里确认：如果输出带引号的字符串，说明确实是未解析的JSON
  }
}
</script>

小提示 #

你可以打开浏览器控制台查看mounted里的console.dir(this.site)输出：如果是带双引号的字符串，就说明需要解析；如果是可以展开的对象，那可能是prop传递逻辑出了问题，可以检查父组件的传值环节。

内容的提问来源于stack exchange，提问作者Sofiane