使用 vue.js 显示 json 结果答案

【问题标题】：Show json result with vue.js使用 vue.js 显示 json 结果
【发布时间】：2018-06-30 20:39:43
【问题描述】：

您好，我正在尝试使用 vue.js 显示 json 文件结果，目标是结果将显示在值上。

这是我的代码：

data () {
  return {
    fetchData: function () {

      var self = this;
      self .$http.get( "/api/casetotalactivation", function( data ) {
        self.items = data;
      });
    },

    statsCards: [
      {
        type: 'warning',
        icon: 'ti-server',
        title: 'Cases',
        value: this.items,
        footerText: 'Updated now',
        footerIcon: 'ti-reload'
      }


    ],

【问题讨论】：

标签： javascript json vue.js

【解决方案1】：

HTML 和 JS 已将其内置到语言中。试试……

<pre>{{ yourObject }}</pre>

这给出了默认缩进，以指定自定义缩进，将其作为第三个参数提供给JSON.stringify(...)。

// replace 2 with '\t' to do tab indentation 
<pre>{{ JSON.stringify(yourObject, null, 2) }}</pre>

如果您不在Vue 之外，那么使用上述剪断的一些组合就可以了。

【讨论】：

很好的答案！更干净一点：<pre>{{ JSON.stringify(yourObject, null, 2) }}</pre>
@AryehBeitz 我在答案中添加了如何指定缩进:)。

【解决方案2】：

就用这个吧：

<pre v-html="JSON.stringify(objectJs, null, 2)"></pre>

【讨论】：

【解决方案3】：

只需使用<pre>

<pre>{{json}}</pre>

【讨论】：

最佳答案，简洁明了

【解决方案4】：

以下代码展示了如何使用 Vue 3 显示 json 结果

使用 v-model 在<textarea> 中显示字符串化的 json 对象
使用<li v-for=""> 显示对象属性

<template>
  <div class="hello">
    <textarea v-model="listDataString" rows="20" cols="80"></textarea>
    <ul id="items">
      <li v-for="(item, index) in listData" :key="index">
        {{ `${item.text} [${item.id}]` }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "RenderList",
  props: {
    msg: String,
  },
  data() {
    return {
      listDataString: String,
      listData: [], // placeholder
    };
  },
  mounted() {
    axios
      .get("=== [API_ENDPOINT] ===")
      .then((response) => {
        this.listDataString = JSON.stringify(response.data, null, "\t");
        this.listData = response.data;
        console.log(this.listDataString);
        return response; // multiline arrow function must return
      });
  },
};
</script>

【讨论】：

【解决方案5】：

如果 /api 仅在开发服务器上，您可以在应用根文件夹中创建 vue.config.js 文件。

module.exports = {
  devServer: {
    before: function(app, server) {
      app.get('/api', function(req, res) {
        const result = [{
          type: 'warning',
          icon: 'ti-server',
          title: 'Cases',
          value: this.items,
          footerText: 'Updated now',
          footerIcon: 'ti-reload'}];
        res.writeHead(200, {'Content-Type': 'application/json'});
        res.end(JSON.stringify(result));
      });
    }
  }
}

当我运行npm run serve 时使用这些文件，我在导航到/api 时会得到json 对象，否则会得到我的常规应用程序。

【讨论】：

【解决方案6】：

使用此代码：

<div id="vueapp">
  <textarea v-model="jsonstr" rows="8" cols="40"></textarea>
  <pre>{{ jsonstr | pretty }}</pre>
</div>

和 JS：

new Vue({
  el: '#vueapp',
  data: {
    jsonstr: '{"id":1,"name":"A green door","price":12.50,"tags":["home","green"]}'
  },
  filters: {
    pretty: function(value) {
      return JSON.stringify(JSON.parse(value), null, 2);
    }
  }
})

【讨论】：

因为我的 value 是一个 Vue 包装的对象，我实际上必须在像这样调用 JSON.stringify 之后反转调用 JSON.parse 的方法顺序：JSON.parse(JSON.stringify(value, null, 2)) 建议在 @ 987654321@