Vue框架下select下拉选框的一些小坑

发布于 2021-03-19  1.18k 次阅读


先放上代码
在html中

<td>
    <select v-model="selected">
       <option v-for="send in searchDto" name="searchDto" :value="send.text" >{{send.text}}</option>
     </select>
</td>

在js中

 var vm = new Vue({
            el: '.app',
            data: {
                name: '',
                age: '',
                selected: '',
                searchDto: [{
                    text: '复兴中学',
                    value: '0'
                }, {
                    text: '光明小学',
                    value: '1'
                }],
                jingli: '',
                peoples: [{
                    name: '小明',
                    age: '18',
                    school: "光明小学",
                    jingli: '三好学生'
                }, {
                    name: '小刚',
                    age: '20',
                    school: "复兴中学",
                    jingli: '优秀班干部'
                }, {
                    name: '小明',
                    age: '18',
                    school: "光明小学",
                    jingli: '三好学生'
                }]
            },
            methods: {
                addPeople: function() {
                    var people = {};
                    people.name = this.name;
                    people.age = this.age;
                    people.school = this.selected;
                    // console.log(this.selected);
                    people.jingli = this.jingli;
                    this.peoples.push(people);
                },
            },

选框选中的值就直接是 html中的v-model,放的就是表单中直接选中的值
而vue的data中的数组searchDto,value就是用于传值给后端的的不需要省略,如果省略变成一个单纯的一维数组的话,那HTML部分就不能获取到值了,
我还不熟练,之后理解到位了再回来进行修改


一个在痛苦与迷茫中行走的人偶