0

I'm trying to display a list with v-for in the code below, but why am I seeing the following error?

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)

My script:

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

My template (excerpt):

<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>
Improve this question
7
  • Shouldn't it be data: { folders: [] }? Commented Aug 22, 2019 at 6:55
  • ReferenceError: data is not defined Commented Aug 22, 2019 at 7:05
  • yes even by doing that it does not work error Commented Aug 22, 2019 at 7:05
  • error change ReferenceError: data is not defined Commented Aug 22, 2019 at 7:06
  • You also need to change v-for="folder in folders" Commented Aug 22, 2019 at 7:07

3 Answers 3

Reset to default
1

Wrap your folders object within 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'
             }
          ]
      }
    }
})
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

You should put your data folders inside data.

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

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

And then iterate through folders

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

Comments

0
  • Change it to data: { folders: [] }
  • Change the for attribute to: v-for="folder in folders"
  • Move the v-for attribute to a parent div element. Currently you are accessing {{folder.employee}} and other properties outside of elemnt with v-for

Here's a working snippet:

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>

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.