V中的vue.js-V模型-用于当前对象

Question

基本上，我希望当我创建几个页面以允许v模型接受所使用的输入时，这里不是所有的内容都是代码：

 <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中的每个v-for，您都会创建一个具有唯一ID的titre (这将在未来帮助您解决问题)。所以你只需要参考上面的内容。

这应该能解决你的问题。