vuejs：如何在 v-for 中使用 v-model 并观看

Question

I have a list of debits and credits that I fetch from a server:

const myApp = Vue.createApp({
    data(){
        return{
            debits:[],
            credits:[],
//cut
        }
    },
    methods:(
      fetch(myUrl,this.myInit)
      .then(response => response.json())
      .then(data => {
          this.credits = data.opes.credits,
          this.debits = data.opes.debits
        })

I display this in aa template, using input type="text" as contenteditable doesn't work with vue.js. Each line has an id and a content ( intitule ) and when the content is changed, I want the id and the content to be sent to a methods in the vuejs.app.js file. (preferably a watch ) so on this gets sent to the server that updates the row with the relevant id with the relevant content. This is the code in the template:

 <div v-for="ligne in credits"
             :debits="ligne"
             :key="ligne.id" 
             class="ligne_entree"
             :id="'ligne_' + ligne.id">

<input type="text" v-model="ligne.intitule" :id="'intitule_' + ligne.id">

</div>

I currently do this:

    watch:{
        'debits.intitule': function(value){
            console.log(watch, value)
        }
    }

I get no error messages. Nothing happens.

Answer 1

try to use @input on @change

<template>
     <div v-for="ligne in credits"
             :debits="ligne"
             :key="ligne.id" 
             class="ligne_entree"
             :id="'ligne_' + ligne.id">

        <input type="text" @input="intitudeHandler($event, lingne.id)" v-model="ligne.intitule" :id="'intitule_' + ligne.id">

    </div>
</template>

<script>
    export default{ 
     methods: {
       intitudeHandler(newValue, id){   ...do something...    }
     }
    }
</script>