Question

如何访问具有2维以上的多维数组？我看过带有2个暗点的示例，到目前为止还可以。但是更多信息不起作用。

new Vue({
  el:'#sample',
  data: {
    private: {
    folders : [{
        name : 'folder1',
        checks : [
          {
            name : 'check1.1' ,
            subs : [
              {
                id:'101',
                last:[
                  {xx:"x1"}
                ]},
                {
                  id:'102',
                  last:[
                    {xx:"x2"}
                  ]
                },
            ]
          },
          { name : 'check1.2' ,
          subs : [
            {
              id:'101',
              last:[
                {xx:"x1"}
              ]},
              {
                id:'102',
                last:[
                  {xx:"x2"}
                ]
              },
          ]
        },
        ]
      },
      {
        name : 'folder2',
        checks : [
          { name : 'check2.1' , sub:[{id:'300'}]},
          { name : 'check2.2' , sub:[{id:'301'}]},
        ]
      }
    ]
    }
  }
});

代码：只需取消即可查看错误。似乎vue甚至不知道数据结构，即使它是在2维之后的数据部分中定义的。谢谢您的帮助。

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Multidim arrays in template</title>
    <link href='styles.css' rel="stylesheet">
    <script src="https://unpkg.com/vue"></script>
  </head>
  <body>

    <div id="sample">
    <table>
      <tr>
        <th>Folder</th>
        <th>Checks</th>
        <th>Checks</th>
      </tr>
      <tr v-if = "private.folders!=null" v-for="folder in private.folders">
      <td><b>{{folder.name}}</b></td>
          <td v-for="check in folder.checks">
             {{check.name}}
             <p  v-if = "check.subs!=null" v-for="sub in check.subs">
               sub:{{sub}}
<!-- This does not work if unremed
               <p v-if = "sub.last!=null" v-for="el in sub.last">
                 el:{{el}}
               </p>
-->
             </p>
          </td>
      </tr>
    </table>
    </div>

  </body>
  <script src="app.js"></script>
</html>

<style scoped>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
</style>

Vue多维数组模板

0 个答案: