J'ai configuré une nouvelle application Vue avec vue-cli. J'ai vue-loader et vue-route également en cours d'exécution dans ce projet.

Comment accéder à une propriété events dans l'instance suivante?

Actuellement, le code ci-dessous génère l'erreur suivante: Property or method "events" is not defined on the instance but referenced during render

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: function(y) {
    return y(App)
  },
    // Data
    data: {
        events: [
            {
                name : 'this',
                price : 2000
            },
            {
                name : 'that',
                price : 3000
            },
            {
                name : 'the-other',
                price : 4000
            },
        ]
    }
}).$mount('#app')

./App.vue

<template>
  <div id="app">
    <div id="nav">

      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>

    </div>


      <ul>
          <li v-for="event in events">
              <h2>{{ event.name }}</h2>
              <p>{{ event.price }}</p>
          </li>
      </ul>



      <router-view/>
  </div>
</template>

2
DevLime 27 janv. 2019 à 20:24

3 réponses

Meilleure réponse

Vos données events existent uniquement dans main.js, mais vous les utilisez dans App.vue qui n'y a pas accès.

Pour rendre les données events, vous pouvez passer le events en tant que props à votre composant App.

render: function(y) {
  return y(App, {
    props: {
      events: this.events
    }
  });
}

Et dans votre App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>

    </div>
      <ul>
          <li v-for="event in events">
              <h2>{{ event.name }}</h2>
              <p>{{ event.price }}</p>
          </li>
      </ul>

      <router-view/>
  </div>
</template>

<script>
  export default {
    name: 'App',
    props: ['events']
  }
</script>
2
Ana Liza Pandac 27 janv. 2019 à 17:36

Vous pouvez le transmettre comme accessoire et utiliser la propriété de modèle template:"<App :events='events'/>", pour rendre le composant App comme suit:

new Vue({
  router,
  store,
 template:"<App :events='events'/>",
    // Data
    data: {
        events: [
            {
                name : 'this',
                price : 2000
            },
            {
                name : 'that',
                price : 3000
            },
            {
                name : 'the-other',
                price : 4000
            },
        ]
    }
}).$mount('#app')

Dans App.vue:

 <template>
 ....
</template>
 <script>
  export default {
    props: ['events']
  }
 </script>
1
Boussadjra Brahim 27 janv. 2019 à 17:38

Que diriez-vous de cela. $ root.events ou créez une propriété calculée dans votre composant d'application et affectez-y les événements racine.

1
Sandesh Satyal 27 janv. 2019 à 17:34