记录el-form输入之后不显示的一种情况

直接上代码:

    // 初始化角色基本信息
    initRole() {
      this.role = {};
      this.role.roleBelong = '';
      this.role.roleCareerType = '';
      this.role.roleCareer = '';
      this.role.roleName = '';
      this.role.remark = '';
    },

起因是我这个模型的字段太多,有200多个,在新增的时候需要把所有字段都初始化,就很麻烦,于是我用了以上代码,先把模型对象置为空,再把新增时主要用到的字段设为空,其他字段等编辑的时候再填。

然后就出现这种无法输入的情况了:疯狂输入都不显示(这里一直按的是111111)

第2个表单项是下拉框(这个可以选),下拉框选择了之后,第一个文本框就只出现了1个字符

反正就是文本框不听使唤了,输入啊,删除啊,都没用。

然后第3个是下拉框,又没法选了(害我在第二个和第三个一直比对都没发现有什么问题)

附:表单代码如下:

《总结》

问题所在:使用了 this.role = {} 来初始化模型。

解决方法:老老实实一个个字段重置。

可能你们碰到的无法输入的情况不一定是这个,但可能也有人跟我一样,希望可以帮到忙。

好的,下面是一个基于Vue实现的任务列表的代码。 ```html <!DOCTYPE html> <html> <head> <title>任务列表</title> <style> .task-list { margin: 20px auto; width: 400px; border: 1px solid #ccc; padding: 20px; } .task-item { margin: 10px 0; display: flex; align-items: center; } .task-item .task-checkbox { margin-right: 10px; } .task-item .task-content { flex: 1; } .task-item .task-edit input { margin-right: 10px; } .task-item.completed { color: #ccc; text-decoration: line-through; } </style> </head> <body> <div id="app"> <div class="task-list"> <h2>任务列表 (未完成: {{unfinishedCount}} / 总数: {{taskList.length}})</h2> <div class="task-item" v-for="(task, index) in taskList" :key="index" :class="{ 'completed': task.completed }"> <input type="checkbox" class="task-checkbox" v-model="task.completed"> <span class="task-content" v-show="!task.isEditing">{{ task.content }}</span> <form class="task-edit" v-show="task.isEditing" @submit.prevent="updateTask(index)"> <input type="text" v-model="task.content"> <button type="submit">保存</button> </form> <button v-if="!task.isEditing" @click="editTask(index)">编辑</button> <button v-if="!task.completed" @click="completeTask(index)">完成</button> <button v-if="task.completed" @click="deleteTask(index)">删除</button> </div> <form @submit.prevent="addTask"> <input type="text" v-model="newTask"> <button type="submit">添加</button> </form> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> new Vue({ el: '#app', data: { taskList: [ { content: '任务1', completed: false, isEditing: false }, { content: '任务2', completed: true, isEditing: false }, { content: '任务3', completed: false, isEditing: false }, ], newTask: '', }, methods: { addTask() { if (this.newTask.trim() !== '') { this.taskList.push({ content: this.newTask, completed: false, isEditing: false }); this.newTask = ''; } }, completeTask(index) { this.taskList.splice(index, 1); }, deleteTask(index) { this.taskList.splice(index, 1); }, editTask(index) { this.taskList[index].isEditing = true; }, updateTask(index) { this.taskList[index].isEditing = false; }, }, computed: { unfinishedCount() { return this.taskList.filter(task => !task.completed).length; }, }, }); </script> </body> </html> ``` 在上面的代码中,我们使用了Vue的指令和计算属性来实现任务列表的功能,其中: - 使用v-for指令遍历数据产生任务列表,每个任务包含内容、完成状态和编辑状态等属性。 - 使用v-model指令实现双向数据绑定,可以实现添加新任务和勾选已完成任务的功能。 - 使用v-bind指令对任务进行class绑定,可以实现将已完成的任务设置为置灰状态。 - 使用v-show指令控制表单与span标签的显示与隐藏,可以实现任务编辑的功能。 - 使用计算属性计算未完成任务的数量和任务总数。 - 使用方法来实现添加、删除、编辑和完成任务的功能。 希望这个例子可以帮助您了解如何使用Vue实现任务列表的功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

buding0716

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值