[Vuejs]-Vue 3 v-model does not update value within an array

by

0👍

Your data is not reactive. You should use reactive or ref to make it reactive.

For arrays you should better use ref

<script setup lang="ts">

import { ref } from 'vue'

let ingredienti: { nome: string, value: number }[] = ref([
    { "nome": "frist", value: 1 },
    { "nome": "second", value: 2 },
]) 
</script>

Check the <input type="number" v-model="ingredienti[1].value" /> field in the playground

const { createApp, ref } = Vue;

const App = { 
  setup() {
    let ingredienti = ref([
        { "nome": "frist", value: 1 },
        { "nome": "second", value: 2 },
    ])
    return { ingredienti }   
  }
}

const app = createApp(App)
const vm = app.mount('#app')
#app { line-height: 2; }
[v-cloak] { display: none; }
<div id="app" v-cloak>
ingredienti : {{ ingredienti }}
<div>
    <p>
        <input type="text" v-model="ingredienti[0].nome" />
    </p>
    <p>Vlaue is: {{ ingredienti[0].value }}</p>
    <p>
        <input type="text" v-model="ingredienti[1].nome" />
    </p>
    <p>Value is: {{ ingredienti[1].value }}</p>
    <input type="number" v-model="ingredienti[1].value" />
</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

Leave a comment