Vue.js—当前对象的v-model

Question

基本上我希望在创建多个页面时允许 v-model 使用输入，而不是一次全部使用这里的代码：

 <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

您唯一需要做的就是在您的定义之前添加 titre。

模板：

...
  <button @click="ajouter()">Ajouter</button>
...
  <div v-for="(titre,index) in titres" :key="titre.id">
    <input v-model="titre.titremodify">
  </div>
...

脚本：

data() {
  return {
    titres: [{    //this is your first input
      id: 1,
    }]
    titremodify: "", 
  }
}

methods: {
  ajouter: function(){   
    this.titres.push({
      id: this.id +=1
    }); 
  },
}

对于 v-for 中的每个 titres，您都创建了一个具有唯一 ID 的 titre（这将有助于您解决未来的问题）。所以你只需要像上面那样参考。

这应该可以解决您的问题。

Vue.js—当前对象的v-model

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

vue.js

v-for

v-model