Prévoir l'état

On coche « Littérature », puis « Informatique », puis « Paquet cadeau », et l'on tape 3 dans le champ de quantité. Que montre la balise <pre> ? Même question si l'on décoche ensuite « Littérature » et le paquet cadeau et que l'on remplace la quantité par « 3 ex ».

<div id="app">
  <div>
    <label v-for="r in ['Informatique', 'Mathématiques', 'Littérature']" :key="r">
      <input v-model="rayons" type="checkbox" :value="r"> {{ r }}
    </label>
    <label><input v-model="cadeau" type="checkbox" true-value="oui" false-value="non"> Paquet cadeau</label>
    <label>Quantité <input type="text" v-model.number="quantite"></label>
    <pre>{{ { rayons, cadeau, quantite } }}</pre>
  </div>
</div>

const { createApp, ref } = Vue;

createApp({
  setup() {
    return { rayons: ref([]), cadeau: ref("non"), quantite: ref(1) };
  },
}).mount("#app");