用vue.js显示json结果

Question

嗨，我尝试用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'
      }


    ],

Answer 1

只需使用<pre>

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

Answer 2

使用此代码：

<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);
    }
  }
})

Answer 3

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

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

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

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

如果你在外面，Vue那么使用上面剪下的一些组合就可以了。