使用 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>

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

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

   ]
}

我在 IE 11 window 的控制台中收到以下错误 - 无法获取未定义或空引用的属性“2”

但是如果我写这个，我会在我的页面中看到数据 -

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

我该怎么做？谢谢

Answer 1

您的代码：

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

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

查看此代码：

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

   ]
}

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

<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>

-- 已更新 --

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

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

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

<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>

使用 Vue js v-for 迭代 json 数据

iterating json data with Vue js v-for

json

vue.js

v-for

-- 已更新 --