vuejs:如何在v-for和watch中使用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
})

我在一个模板中显示了这一点，使用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>