Vue.js中的2D数组

Question

我对Vue和js还是相当陌生，我正在尝试创建具有Firebase集成的Todo应用程序。 我需要的是以下内容：应该有一个创建新任务列表的选项和一个在此列表中创建新任务的选项。 所以我需要一个清单清单。 我的Firebase数据库结构如下所示：

用户（集合）->任务（集合）->并在followin结构内部：

我知道应该有一个嵌套的v-for元素对吗？ 像这样：

<div v-for="task in tasks" :key="task.id">
    <ul v-for="todo in task(?)">
    </ul>
</div>

但是我不知道该如何处理。 任何建议将不胜感激！

Answer 1

<template>
  <ul>
    <li v-for="task in tasks" :key="task.id">
	{{task.name}}
      <ul>
        <li v-for="td in task.todo" :key="td.id">
          {{ td.completed }}
	  <br>
	 {{ td.date }}
	 <br>
	 {{ td.title }}
 	<br>
	 {{ tdurgent }}
	  

        </li>
      </ul>
    </li>
  </ul>
</template>
<script>
import {db} from './firebase';

export default {
  data() {
    return {
      users: {}
    }
  },

  firebase: {
    tasks: {
      source: db.ref('tasks'),
      // Optional, allows you to handle any errors.
      cancelCallback(err) {
        console.error(err);
      }
    }
  }
}
</script>



firebase.js

import Firebase from 'firebase'

const firebaseApp = Firebase.initializeApp({
  // Populate your firebase configuration data here.
  ...
});

// Export the database for components to use.
// If you want to get fancy, use mixins or provide / inject to avoid redundant imports.
export const db = firebaseApp.database();

Answer 2

你可以这样写

<div v-for="task in tasks" :key="task.id"> 
           <ul v-for="todo in task.keyOfArrayType" :key="todo.id" > 
                       {{todo.name}}
            </ul> 
</div>

Answer 3

In the json no key id display for both outer and inner  if you interested to put key:="task.id" then you have to change the structure like
otherwise remove :key = "task.id"  and :key="td.id"

<ul>
    <li v-for="task in tasks" :key="task.id">
	{{name}}
      <ul>
        <li v-for="td in task.todo" :key="td.id">
          {{ completed }}
	  <br>
	 {{ date }}
	 <br>
	 {{ title }}
 	<br>
	 {{ urgent }}
	  

        </li>
      </ul>
    </li>
  </ul>