从 vue 访问格式为 json 的 axios 数据答案

【问题标题】：Access an axios data formatted as json from vue从 vue 访问格式为 json 的 axios 数据
【发布时间】：2020-05-28 02:53:48
【问题描述】：

我需要显示来自 get 请求的 json 响应的数据。我的代码的 Vue 部分是：

<script type="text/javascript">

  var vm = new Vue({
      el: '#app2',
      delimiters: ['[[',']]'],
      data: {
        masa_data: {},
      },
      mounted: function() {

              polling1=setInterval(function() {
              axios.get('/order')
                  .then(function(response) {
                      vm.$data.masa_data = response.data;
                  })
          }, 1000);        
      },

      beforeDestroy () {
        clearInterval(this.polling1)
      }
  });
</script>

masa_data 来自 axios 如下：

{ "Bahçe1": { "A": { "1": { "kisi_sayisi": "2", "siparisler": [ { "adet": 2, "bolum": "drink", "satir": "Açık Çay" }, { "adet": 1, "bolum": "tatli", "satir": "Kaymaklı Ekmek Kadayıfı" } ] },

例如，当我想显示“kisi_sayisi”的值时，我不知道在下面的 html 代码中放置什么：

<p class="card-text">[[masa_data]]</p>

【问题讨论】：

你可以直接使用['key_name']对吗？
说 masa_data['Bahçe1']['A']['1']['kisi_sayisi']
通常是的。我试过了。但是视图并没有显示出来。
可能是因为 [[..]] 大括号？
如果数据不存在可以尝试 V-if masa_data['Bahçe1']['A'][ '1']['kisi_sayisi']

标签： json vue.js flask axios response

【解决方案1】：

试试这个。

<p class="card-text" v-if="Object.values(masa_data).length>0">[[masa_data.Bahce1.A['1']['kisi_sayisi'] ]]</p>

https://codepen.io/Pratik__007/pen/QWbjOxE?editors=1010

【讨论】：