ReferenceError：文件夹未定义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放在数据里面。

https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function

new Vue({
    el:'#app',
    data: function () {
      return {
        folders: []
      }
    }
})

然后遍历文件夹

<div v-for="folder in folders">
...
</div>

Answer 2

将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'
             }
          ]
      }
    }
})

Answer 3

• 改成data: { folders: [] }
• 将 for 属性更改为：v-for="folder in folders"
• 将v-for 属性移动到父div 元素。目前您正在使用v-for 访问{{folder.employee}} 和elemnt 之外的其他属性

这是一个有效的 sn-p：

new Vue({
  el: "#app",
  data: {
    folders: [{
        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'
      }
    ]
  }
})

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" class="card card__item card__item__link card__item--valid w-100">
  <div v-for="folder in folders" class="row align-items-center">
    <div 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 class="col-12 col-lg-3 col-xl text-center text-lg-right">

      <button class="btn btn-icon btn-light ml-2 tooltip__item"><i class="far fa-copy"></i><span class="tooltip__item__text">Dupliquer</span></button>
      <button class="btn btn-icon btn-light ml-2 tooltip__item"><i class="far fa-trash-alt"></i><span class="tooltip__item__text">Supprimer</span></button>
    </div>
    <a class="btn-transparent" href="contrat.html" title="Consulter ce contrat"></a>
  </div>
</div>