vuejs：如何在 v-for 中使用 v-model 並觀看

Question

我有一個從服務器fetch的借方和貸方列表：

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
        })

我在 aa 模板中顯示它，使用input type="text"作為 contenteditable 不適用於 vue.js。 每行都有一個 id 和一個內容（ intitule ），當內容更改時，我希望將 id和內容發送到 vuejs.app.js 文件中的方法。 （最好是watch ）這樣就被發送到服務器，該服務器用相關的 id 和相關的內容更新行。 這是模板中的代碼：

 <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>

我目前這樣做：

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

我沒有收到錯誤消息。 什么都沒發生。

Answer 1

嘗試在@change 上使用@input

<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>