| vue, 循环, v-mode

如何使用vue在循环中绑定v-mode

这几天用vue写form表单时，遇到了一个问题，那就是如何使用vue在循环中绑定v-mode的问题。
我现在给大家举一个例子，大致的内容就是在form表单里面添加自己的一个兴趣爱好，点击添加兴趣爱好就会在下列添加一项兴趣项，内容如下图所示：
form表单__添加自己的兴趣爱好
在做这个小demo的时候，我遇到的问题就是添加兴趣爱好之后，在新添加这一栏会出现上一次我们添加的内容，并且改变相应的内容会导致上一个的兴趣爱好内容被修改，给大家具体还是看一下我遇到问题的图片。

  1. 添加新的一个爱好项目时，新添加这一栏会出现上一次我们添加的内容，如下图所示：
    新添加一栏出现上一次添加的内容

  2. 改变新添加爱好项目的内容时，上一次添加的内容也会被改变，如下图所示：
    修改新添加的内容，以前的内容也会跟着改变

相应的解决办法是：
在添加兴趣爱好按钮上添加一个新对象，添加一个addLike属性，并且值为””空，这样就可以保证每一次添加时值不会相互影响。最后给大家看看具体的代码：
首先先给大家看看我创建的文件路径关系，我首先创建了一个components文件夹，然后再在components文件夹里面创建了一个form.vue文件，如下图所示：
文件之间的路径关系

form.vue文件中代码如下所示：
注意：我在这里面使用了bootstrap框架，如果大家想要有一定的样式话，只需要在public文件夹下面的index.html引入相应的网址即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<template>
  <form class="form-horizontal form-box">
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
        <button 
        class="btn btn-default" 
        @click.prevent="add">添加兴趣爱好</button>
        </div>
    </div>  
    <div 
    class="form-group"
    v-for="(item,index) in like"
    :key="index">
      <label for="inputEmail3" class="col-sm-2 control-label">兴趣爱好#{{item.value}}</label>
      <div class="col-sm-10">
        <input 
        type="text" 
        class="form-control" 
        :placeholder="'兴趣爱好#'+item.value"
        v-model="item.addLike" />
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button 
        type="submit" 
        class="btn btn-default"
        @click.prevent="onSumbit"
        >提交</button>
      </div>
    </div>
  </form>
</template>

<script>
export default {
    data(){
        return {
            like: [],
            count: 0
        }
    },
    methods: {
        add(){
            let newLike = {
                addLike: "",
                value: ++this.count
            };
            this.like.push(newLike);
        },
        onSumbit(){
            let newData = {
                like: this.like.map((val)=>{return val.addLike})
            };
            console.log(newData.like);
        }
    }
};
</script>

<style scoped>
.form-box{
    margin-top: 100px;
}
</style>

在App.vue文件中有如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
  <div class="container">
    <my-form></my-form>
  </div>
</template>
<script>
import form from "./components/form";
export default {
  components: {
    "my-form": form
  }
}
</script>
<style>
</style>

最后执行在终端中执行命令，第一个命令就是cd xxx进入到你相应创建的vue文件中，第二个命令就是npm run serve来启动相应的项目。