用Vue js v-for迭代json数据

Question

我的JSON数据结构如下：

Table - 
    0 -
          0 - "xyz"
          1 - "abc"
          **2 - 45**
          3 - "ab"
          ...
    1 -   ...
    2 -   ...
    3 -   ...
    ....

我试图获取每个外部索引的内部索引数据的索引2的值。我怎么用v-for做到这一点。我已经尝试过这种方式，但它无法正常工作。

<table>
   <tr v-for = "row in rows">
      <td>{{ row[2] }}</td>
   </tr>
</table>

我正在添加abbr版本的实际数据

{
  "Table":[
     [
       null,
       3,
       47,
       "new planning",
       "planning_new_0314",
       null,
       .....
     ],
     [ + ],
     [ + ],
     ...

   ]
}

我在IE 11的控制台窗口中收到以下错误 - 无法获得财产＆＃39; 2＆＃39;未定义或空引用

但如果我写这篇文章，我会在我的页面中看到数据 -

<tr v-for = "row in rows">
      <td>{{ row }}</td>
   </tr>

我该怎么做？ 感谢

Answer 1

您的代码：

 <td>{{ row[2] }}</td>

...是一个很好的方法。

请参阅此代码：

＆＃13;

＆＃13;

var object = {
  "Table":[
     [
       null,
       3,
       47,
       "new planning",
       "planning_new_0314",
       null,
       //.....
     ],
     [],
     [],
     //...

   ]
}

new Vue({
  el: "#app",
  data: function() {
    return {
    	table: object.Table
    }
  }
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.5/vue.js"></script>

<div id="app">
  
  <div v-for="row in table">
    {{ row[2] }}
  </div>
  
</div>

＆＃13;

＆＃13;

＆＃13;

- 更新 -

也许在你的情况下obj.Table有一行没有index 2。我用上面的代码测试了这个案例并且它可以工作。

但是如果您对IE 11有问题，请尝试使用此代码验证行和行[index]是否未定义（不确定是否可以解决您的问题......）：

＆＃13;

＆＃13;

var object = {
  "Table":[
     [
       null,
       3,
       47,
       "new planning",
       "planning_new_0314",
       null,
       //.....
     ],
     [1,2,3,4],
     [1],
     //...

   ]
}

new Vue({
  el: "#app",
  data: function() {
    return {
    	table: []
    }
  },
  methods: {
    getTableDatas: function() {
      this.table = object.Table;
    },
    getRowIndex: function(row, index) {
      //you can/should replace "'!!no index ' + index" by empty string !
      return ((typeof row !== 'undefined') && (typeof row[index] !== 'undefined'))
             ? row[index] : '!!no index ' + index;
    }
  }
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.5/vue.js"></script>

<div id="app">
Comment : The third row has no index "2".<br/>
  <button @click="getTableDatas">Get table datas</button>
  <div v-for="row in table">
    {{ getRowIndex(row, 2) }}
  </div>
  
</div>

＆＃13;

＆＃13;

＆＃13;