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 puis-je accéder à une propriété événements dans l'instance suivante?
Actuellement, le code ci-dessous génère l'erreur suivante: La propriété ou la méthode "events" n'est pas définie sur l'instance mais référencée lors du rendu
main.js
<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>
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')
3 Réponses :
qu'en est-il de ceci. $ root.events ou créez une propriété calculée dans votre composant d'application et affectez-y les événements racine.
Oui. this. $ root.events fonctionne immédiatement. Merci pour ça :)
@DevLime il n'est pas recommandé d'accéder aux données parentes de cette manière, veuillez vérifier cette question stackoverflow.com/questions/53549064/...
Vos données événements existent uniquement dans main.js mais vous les utilisez dans App.vue qui n'a pas accès à
Pour rendre les données événements , vous pouvez transmettre les événements en tant que accessoires à votre composant App .
<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>
Et dans votre App.vue
render: function(y) {
return y(App, {
props: {
events: this.events
}
});
}
Oui! A également travaillé. Existe-t-il un moyen préféré de le faire lorsqu'un accès global est nécessaire sur la propriété initiale? Donc, si je mets à jour cela ailleurs, toutes les autres vues sont également mises à jour.
@DevLime En citant la documentation officielle, vous pouvez l'utiliser pour des démos ou de très petites applications qui ont une poignée de composants. Cependant, utiliser this. $ Root pour accéder à l'instance racine ne s'adapte pas bien aux applications à moyenne ou grande échelle.
Oui, il n'est pas recommandé d'accéder aux données parentes en utilisant this. $ Root comme je l'ai expliqué ici
Merci pour ça. Ce n'est que pour une démo technique, mais il transportera les données sur plusieurs composants et mettra à jour toutes les vues en conséquence, cette méthode tiendra-t-elle dans ce cas?
Testé sur mon local. La manipulation directe de la valeur des événements en utilisant this. $ Root semble fonctionner et elle met également à jour les autres composants.
J'ai passé du temps à dépouiller mon application et (comme je suis sûr que vous le savez!) C'est la réponse vers laquelle pointent les ressources éducatives officielles / recommandées de Vue. Merci pour votre aide à vous deux :) Il me reste encore un peu de temps à parcourir avant qu'il ne «clique» mais j'apprécie les réponses rapides à cette question.
Mise à jour rapide - Oui. Cela clique totalement maintenant. Très bien la bonne façon de le faire :)
Vous pouvez le transmettre comme accessoire et utiliser la propriété de modèle template: " pour rendre le composant App comme suit:
<template>
....
</template>
<script>
export default {
props: ['events']
}
</script>