Des erreurs de code.
Je travaille actuellement sur la conversion d’un site web conçu avec Adobe Muse en VueJS, où l’une des pages a un layout particulier : un bloc (.infoOffre) composé de 4 sous blocs, contenant chacun une image d’illustration (.privat) et un texte descriptif (.nicole).
La position de l’image d’illustration par rapport au texte varie d’un bloc à l’autre : dans le premier et le 3e bloc, l’image est à gauche du texte, tandis que dans le 2e et le 4e bloc, l’image est plutôt à droite du texte.
Rien qui ne puisse être réglé avec des classes CSS alternées. Toutefois, j’avais envie de tester la puissance de Chat GPT.
Je lui ai donc soumis le problème, avec mon code.
L’intelligence artificielle m’a fourni la réponse suivante
<template>
<div id="lagence">
<div id="agencewrapper2">
<div id="ghislaine" class="container">
<div class="infoOffre" v-for="(offre, index) in agence.offreContenu" :key="offre.id">
<div v-bind:class="className(index)">
<div class="nicole">
<h4>{{ offre.titre }}</h4>
<p>{{ offre.contenu }}</p>
<span>{{ offre.souscontenu }}</span>
</div>
<div class="privat">
<img :src="offre.illustration" alt="agence de développement abidjan">
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
layout: 'content',
async asyncData({ $content, params, app, error }) {
const agence = await $content(app.i18n.locale, "agence", params.slug)
.fetch()
.catch(() => {
error({ statusCode: 404, message: 'Page not found' })
})
return { agence };
},
data() {
return {
counter: 0
}
},
computed: {
className(index) {
if ((index + this.counter) % 2 === 0) {
return 'normal';
} else {
return 'normalalt';
}
}
},
methods: {
incrementCounter() {
this.counter++;
}
}
};
</script>Ce code comporte 2 ou 3 erreurs, a une variable superflue ( counter) et renvoie plus d’informations que nécessaire. En gros, il n’est pas efficace.
Mais surtout, il renvoie l’erreur suivante
_vm.className is not a function
Une bonne pratique est d’utiliser les versions abrégées des attributs. Remplaçons donc
<div v-bind:class="className(index)">par
<div :class="className(index)">On peut également remplacer les références à className . C’est un point de détail pour certains, mais cette fonction ressemble trop à un attribut de ReactJS.
<div v-bind:class="nomdelaClasse(index)"> nomdelaclasse(index) {
if ((index + this.counter) % 2 === 0) {
return 'normal';
} else {
return 'normalalt';
}
}Ensuite, on peut déplacer la fonction qui permet d’afficher nos classes alternées de computed à methods , étant donné qu’on souhaite que le code s’exécute chaque fois que l’on appelle.
methods: {
incrementCounter() {
this.counter++;
},
nomdelaclasse(index) {
if ((index + this.counter) % 2 === 0) {
return 'normal';
} else {
return 'normalalt';
}
}
}Enfin, la variable counter ne sert à rien ici, l’index du v-for permet d’avoir une variable incrémentée automatiquement au fur et à mesure que la boucle v-for est executée.
data() {
return {
}
},
computed: {
},
methods: {
nomdelaclasse(index) {
if ((index + this.counter) % 2 === 0) {
return 'normal';
} else {
return 'normalalt';
}
}
}
};Ce qui donne le code ci-dessous
<template>
<div id="lagence">
<div id="agencewrapper2">
<div id="ghislaine" class="container">
<div class="infoOffre" v-for="(offre, index) in agence.offreContenu" :key="offre.id">
<div v-bind:class="nomdelaclasse(index)">
<div class="nicole">
<h4>{{ offre.titre }}</h4>
<p>{{ offre.contenu }}</p>
<span>{{ offre.souscontenu }}</span>
</div>
<div class="privat">
<img :src="offre.illustration" alt="agence de développement abidjan">
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
layout: 'content',
async asyncData({ $content, params, app, error }) {
const agence = await $content(app.i18n.locale, "agence", params.slug)
.fetch()
.catch(() => {
error({ statusCode: 404, message: 'Page not found' })
})
return { agence };
},
data() {
return {
}
},
computed: {
},
methods: {
nomdelaclasse(index) {
if ((index) % 2 === 0) {
return 'normal';
} else {
return 'normalalt';
}
}
}
};
</script>
Pour résumer,
ChatGPT est un outil fantastique et une avancée sans précédent dans le domaine de l’intelligence artificielle. Toutefois, en ce qui concerne le code, il y a, pour l’instant, un manque de qualité . En d’autres termes, le modèle n’est pas encore l’ensemble de sous données nécessaires pour produire un code sans faille.
Évitez donc d’aller plaquer du code récupéré sur ChatGPT çà et là dans vos applications web sans le vérifier auparavant.
Utilisez plutôt Stack Overflow pour cela 🙂
