项目需求
- vue项目，后端获取的n条数据中的名称，前台展示，并要求点击后可直接修改这个效果
1.使用input标签，但是:value和:model使用有问题
2.给按钮绑定enter事件，修改成功后光标依旧在闪，用户体验不好，需解决
一
<div class="lf"> <input type="text" class="noname" :title="item.show_name" :value="item.show_name?item.show_name:'未命名视频'" @keyup.enter="search($event,item)" @blur="search($event,item)" /></div>search: function (event, item) {//保存视频名称 let that = this let obj = { task_id: item.id, show_name: event.currentTarget.value } that.$ajax.post("/test", obj).then(res => { if (res.data.rtn == 0) { Message({ type: 'success', showClose: true, message: '命名成功！', duration: 3500 }) event.srcElement.blur() //主动使按钮失去焦点 } })},结论
1.使用search($event)方法贼强大，比那些$refs等获取的跟强大（个人使用感觉），获取输入的字符很方便
2.主动使按钮失去焦点如代码片段中注释所写
项目小需求
1.vue路由跳转后新打开页面
这个百度都能搜到
let { href } = this.$router.resolve({ //打开新窗口 path: "/new/admaking/production", query: { } }) window.open(href, '_blank')