Vue.js—V-model in v-for current object - vue.js

Question

Basically I would like when I create several pages to allow the v-model to take the input used and not all at once here is the code :
<div id="app">
<div class="container">
<div class="row">
<p class="jumbotron"> Titre de la page <input type="text" v-model="titre" >
<button type="submit" v-on:click="ajouter()">Ajouter</button> </p>
</div>
<div class="row">
<div class="row-5" v-for="(titre,index) in titres">
<p class="list-group-item" style="text-align: center;">
Titre de la page : {{ titre }}
<input type="text" value="" v-model="titremodify" ><br>
<button class="btn btn-dark" v-
on:click="supprimer()">Supprimer</button>
<button class="btn btn-dark" v-
on:click="modifier(index)">Modifier</button>
</p>
</div>
</div>
</div>
</div>
https://jsfiddle.net/nestea29950/L8foc7zd/4/

Answer 1

The only thing you need to to is to add titre before your definition(s).
TEMPLATE:
...
<button #click="ajouter()">Ajouter</button>
...
<div v-for="(titre,index) in titres" :key="titre.id">
<input v-model="titre.titremodify">
</div>
...
SCRIPT:
data() {
return {
titres: [{ //this is your first input
id: 1,
}]
titremodify: "",
}
}
methods: {
ajouter: function(){
this.titres.push({
id: this.id +=1
});
},
}
For every titres in your v-for you create a titre with a unique ID (this will help you out in future matters). So you just have to reference on this like above.
This should solve your problem.