Je suis assez nouveau sur vue.js, et j'essaie de créer une application de base qui affiche les données extraites d'une API.
Je ne comprends pas pourquoi je ne peux pas utiliser console.log dans mes scripts: p >
<script>
import Header from './components/layout/Header.vue'
import Todos from './components/Todo.vue'
export default {
name: 'app',
components: {
Todos,
Header,
},
data () {
return {
todos : []
}
},
methods : {
created () {
fetch('https://jsonplaceholder.typicode.com/todos')
.then( resp => resp.json())
.then( data => {
console.log(data);
})
.catch(err => err)
}
}
}
</script>
J'ai toujours une "déclaration de console inattendue"
Est-ce que quelqu'un sait comment je peux consigner des choses dans les scripts vue? Est-ce que je manque quelque chose ??
Merci beaucoup !!
4 Réponses :
Vous pouvez essayer
{{ log(message) }}
Et lorsque vous voulez écrire des choses sur la console, utilisez:
methods: {
log(msg){
console.log(msg);
}
}
Merci pour votre réponse! J'ai essayé ça: cependant, ça plante la même erreur: je ne peux pas écrire de console.log dans mes scripts: ça renvoie toujours la même erreur "instruction de console inattendue" J'ai le sentiment que ce n'est pas le droit d'enregistrer des trucs dans le console avec vue mais je ne comprends pas pourquoi ...
Je pense que vous devez appeler return lorsque vous le tournez vers json () comme ceci
.catch(err => {
console.log(err.response.data)
})
Je ne sais pas non plus si vous ont une faute de frappe mais votre méthode created () ne doit pas être à l'intérieur de l'objet methods .
devrait ressembler à ceci
<script>
export default{
name: '',
data(){
return {
}
},
methods:{
},
created() {
}
}
</script>
Et essayez peut-être console.log () dans la section error de votre méthode de récupération au cas où il y aurait une erreur lors de la réception des données.
.then(resp => return resp.json())
Merci d'avoir répondu ! Cependant, c'est l'instruction console.log qui est à l'origine du problème: elle ne fonctionne pas avec aucun de mes scripts: si je console.log dans un composant vue, cela plante une erreur ...
C'est étrange, je ne pense pas que ce soit un problème de vue. Je l'utilise tout le temps.
Que diriez-vous d'utiliser async / await pour aider à briser le flux?
export default {
name: 'app',
components: {
Todos,
Header,
},
data () {
return {
todos : []
}
},
methods : {
async created () {
try {
const resp = await fetch('https://jsonplaceholder.typicode.com/todos');
const data = resp.json();
// eslint-disable-next-line no-console
console.log(data);
} catch (err => console.error(err))
}
}
}
Merci pour votre réponse! Cela semble être le même problème que pour les autres problèmes: je ne peux pas écrire de console.log dans mes scripts: il renvoie toujours la même erreur "instruction de console inattendue" J'ai le sentiment que ce n'est pas le droit d'enregistrer des éléments dans le console avec vue mais je ne comprends pas pourquoi ...
Utilisez-vous un linter? Peut-être avez-vous cet ensemble de règles et c'est l'erreur que vous voyez: eslint.org/docs/rules/ no-console Essayez d'ajouter // eslint-disable-next-line no-console sur la ligne avant votre instruction console pour voir si cela résout le problème. Si tel est le cas, il s'agit d'une règle lintante, pas d'une erreur vue / javascript.
Vous avez raison !! Cela semble résoudre le problème que j'ai eu, mais j'ai maintenant un TypeError: Impossible de lire la propriété 'log' de undefined. Savez-vous ce qui cause ce problème?
Bizarre ... je ne sais pas ce qui pourrait en être la cause, mais essayez d'autres fonctions de la console comme console.warn / console.error et essayez d'utiliser console.log < / code> à d'autres endroits (avec ce commentaire pour désactiver le linter) et voir si cela fonctionne. Essayez de préciser où / quel est le problème.
Il est normal que cela ne fonctionne pas dans une fonction fléchée. Essayez ceci.
created () {
fetch('https://jsonplaceholder.typicode.com/todos')
.then( resp => resp.json())
.then(function (data) {
console.log(data);
})
.catch(err => err)
}
Salut ! c'est le même problème avec l'instruction console.log qui ne semble pas fonctionner à l'intérieur des scripts C'est super bizarre ...
Pouvez-vous fournir un exemple minimal et reproductible , par exemple dans JSFiddle ?