javascript - 引用错误: folders is not defined vue:6

Question

我尝试在下面的代码中显示带有 v-for 的列表，但为什么我会看到以下错误？

ReferenceError: folders is not defined
    at wn.eval (eval at Ya (vue:6), <anonymous>:3:243)
    at wn.e._render (vue:6)
    at wn.r (vue:6)
    at fn.get (vue:6)
    at new fn (vue:6)
    at vue:6
    at wn.$mount (vue:6)
    at wn.$mount (vue:6)
    at wn.t._init (vue:6)
    at new wn (vue:6)

我的脚本:

new Vue({
    el:'#app',
    folders : {
        data : [
            {
                employee:'Jean-philippe Risoli',
                datecontractfrom:'01/01/2019',
                datecontractend:'31/12/2019', 
                entreprise:'Goweb', 
                dossier:'1234', 
                status:'valide'
            },
            {
                employee:'Lucie Maréchal', 
                datecontractfrom:'01/02/2019', 
                datecontractend:'12/04/2019', 
                entreprise:'Leroy Merlin', 
                dossier:'2389', 
                status:'encours'
            },
            {
                employee:'Marie Fringalle', 
                datecontractfrom:'14/04/2019', 
                datecontractend:'31/07/2019', 
                entreprise:'Décathlon', 
                dossier:'7892', 
                status:'enattente'
            }
        ]
    }
})

我的模板(摘录):

<div class="row align-items-center">
  <div v-for="folder in folders.data" class="col-12 col-xl-2">
    <p class="text-uppercase"><span class="circle"><i class="fas fa-check"></i></span>{{folder.status}}</p>
  </div>
  <div class="col-12 col-sm-5 col-md-5 col-lg-4 col-xl-3 col-xxl-4">
    <p><strong>{{folder.employee}} :</strong> <br class="d-xxl-none"/>du {{folder.datecontractfrom}}au {{folder.datecontractend}}</p>
  </div>
  <div class="col-12 col-sm-4 col-md-4 col-lg-3 col-xl-3 col-xxl-3">
    <p>Entreprise :<br class="d-xxl-none"/> <strong>{{folder.entreprise}}</strong> </p>
  </div>
  <div class="col-12 col-sm">
    <p>N° de dossier :<br class="d-xxl-none"/><strong>{{folder.dossier}}</strong> </p>
  </div>
</div>

Answer 1

将您的folders对象包装在data中。

new Vue({
    el:'#app',
    data: {
      folders : {
          data : [
              {
                employee:'Jean-philippe Risoli',
                datecontractfrom:'01/01/2019',
                datecontractend:'31/12/2019', 
                entreprise:'Goweb', 
                dossier:'1234', 
                status:'valide'
              },
              {
                  employee:'Lucie Maréchal', 
                  datecontractfrom:'01/02/2019', 
                  datecontractend:'12/04/2019', 
                  entreprise:'Leroy Merlin', 
                  dossier:'2389', 
                  status:'encours'
             },
              {
                  employee:'Marie Fringalle', 
                  datecontractfrom:'14/04/2019', 
                  datecontractend:'31/07/2019', 
                  entreprise:'Décathlon', 
                  dossier:'7892', 
                  status:'enattente'
             }
          ]
      }
    }
})