[Vuejs]-VueJS : Get my variable to update when I update my input/select

by

1👍

✅

Try with 2-way binding v-model:

const app = Vue.createApp({
  data() {
    return {
      selected_ingredients: [{ 'uuid': 1, 'nom': 'chicken', 'quantite': '500', 'unite': 'g'}, { 'uuid': 2, 'nom': 'chicken', 'quantite': '300', 'unite': 'mL'}],
      categories: [],
      tags: [],
      ingredients: [],
      selected_tags: {},
      liste_unites: ['pièce', 'mL', 'g']
    };
  },
})
app.mount('#demo')
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <div v-for="(ingredient) in selected_ingredients" :key="ingredient.uuid">
    <input type="text" v-model="ingredient.quantite">
    <select v-model="ingredient.unite">
      <option
          v-for="unite in liste_unites"
          :key="unite"
          :value="unite"
      >{{ unite }}</option>
    </select>
  </div>
  {{selected_ingredients}}
</div>
👤Nikola Pavicevic

0👍

Make sure Vue knows that you want ingredient.quantite to be reactive

Currently you have not done that.

To fix this, try moving your definition of selected_ingredients to within the data function:

data: function () {
return {
    selected_ingredients:[{ 'uuid': uuid, 'nom': 'chicken', 
                 'quantite': '500', 'unite': 'g'}, {...}],
    categories: [],
    tags: [],
    ingredients: [],
    selected_tags: {},
    selected_ingredients: [],
    liste_unites: ['pièce', 'mL', 'g']
  }
}
👤ProfDFrancis

Leave a comment