Tutoriel VueJS 3 – Liaison d’attributs

Le chapitre précédent a affiché du texte entre doubles accolades. Ces accolades ne fonctionnent qu’entre les balises, jamais dans un attribut. Pour lier un attribut à une donnée, il faut une directive : v-bind.

L’image du produit

Notre boutique a besoin d’une image. Placez deux fichiers dans public/images/ : t-shirt-bleu.svg et t-shirt-rouge.svg. Tout ce qui est rangé dans public/ est servi tel quel à la racine du site, donc le chemin dans le code sera /images/t-shirt-bleu.svg.

Ajoutez une référence pour le chemin de l’image :

<script setup>
import { ref } from 'vue'

const product = ref('T-Shirt')
const image = ref('/images/t-shirt-bleu.svg')
</script>

Ce qui ne marche pas

Premier réflexe, écrire le nom de la variable dans l’attribut :

<img src="image">

Le navigateur cherche alors un fichier littéralement nommé image et affiche une image cassée. L’attribut a reçu la chaîne "image", pas la valeur de la variable.

Deuxième réflexe, les accolades :

<img src="{{ image }}">

Cela ne marche pas non plus. Vue interpole le texte des nœuds, pas les attributs.

v-bind

La bonne réponse est la directive v-bind. Elle dit à Vue : « le contenu de cet attribut est une expression JavaScript, évalue-la ».

<template>
  <div class="product-display">
    <div class="product-image">
      <img v-bind:src="image" v-bind:alt="product">
    </div>
    <div class="product-info">
      <h1>{{ product }}</h1>
    </div>
  </div>
</template>

L’image s’affiche, et l’attribut alt reprend le nom du produit.

Le raccourci deux-points

v-bind est tellement courant qu’il a une forme courte : les deux-points seuls.

<img :src="image" :alt="product">

Les deux écritures sont strictement équivalentes. La forme courte est celle qu’on trouve partout, y compris dans la documentation officielle, c’est celle que nous utiliserons dans la suite du tutoriel.

Une liaison, pas une copie

La liaison est réactive et dans un seul sens : de la donnée vers le gabarit. Si vous changez la valeur, l’attribut suit.

const image = ref('/images/t-shirt-bleu.svg')

// plus tard, au clic ou au survol :
image.value = '/images/t-shirt-rouge.svg'   // le src de l’img change aussitôt

C’est ce mécanisme que le chapitre 5 utilisera pour changer l’image au survol d’une couleur.

Ce que v-bind sait faire d’autre

N’importe quel attribut se lie de la même façon.

<a :href="lienProduit">Voir la fiche</a>
<button :disabled="enRupture">Ajouter au panier</button>
<div :class="classeCourante"></div>
<div :style="{ backgroundColor: couleur }"></div>
<input :value="nom">

Deux cas méritent une note.

Les attributs booléens comme disabled suivent la règle du HTML : Vue ajoute l’attribut si l’expression est vraie et le retire complètement si elle est fausse. Écrire :disabled="false" produit un bouton actif, pas un bouton portant disabled="false".

Les attributs class et style ont un traitement spécial : ils acceptent aussi des objets et des tableaux. C’est le sujet du chapitre 6.