首页 > 其他分享 >vue中v-if控制的可编辑div(contenteditable='true')无法绑定@input事件

vue中v-if控制的可编辑div(contenteditable='true')无法绑定@input事件

时间:2022-10-19 12:15:01浏览次数:58  
标签:vue contenteditable 绑定 flag input true bindInputEvent

<div class="content-container" ref="contentContainer">
  <div v-if="flag" ref="ContentEditable">   <div v-for="(item,index) in data" :key="index" class="each-editable" contenteditable="true" v-html="item"></div>   </div>
</div>

<script>
  data(){
    flag:false
  },
  mounted(){
    this.bindInputEvent()
  },
  methods:{
    bindInputEvent(){
      this.$refs.contentContainer.oninput = function(event){
        // 执行操作
      }
    }
  }
</script>
 

flag改变为true时,可编辑框绑定的@input事件始终没有触发。最后做了事件委托,搞定。

 

标签:vue,contenteditable,绑定,flag,input,true,bindInputEvent
From: https://www.cnblogs.com/junlinglife/p/16805807.html

相关文章

  • VUE3.0 中如何使用SVG图标
    1.文件下新建SvgIcon文件夹以及子文件index.js,index.vue,svg文件夹(用于存放svg图片) 2.编写index.vue组件<template><svg:class="svgClass"aria-hidden="true">......
  • 如何不借助第三方web服务器启动(webpack)vue打包后的dist目录
    很多时候,我们打包完成了,想看看打包后的项目是否有问题,那么会借助于除webpack之外的第三方工具例如http-servernginx等那么是否有办法能将就开发环境的localhost:xxxx/di......
  • 总结 vue 实现分页器的基本思路
    简介本文介绍基于vue2框架实现基本的分页器,包括页码前进/后退、页码点击跳转、显示...、显示总页数、显示总数据条数等功能。效果预览快速跳转视图部分、样式部......
  • Vue使用keep-alive后,el-tooltip悬浮内容在切换页面时不自动消失
    试过在deactivated()和App.vue里改,都无效。有用的方法:在第二个页面中判断是否有这个元素,手动移除;beforeCreate(){constdom=document.querySelect......
  • vue-element-admin 安装报错解决办法
    1.克隆以后删除package.json中tui-editor:1.3.32.\src\components\MarkdownEditor\index.vue文件,将全部import换成下面几个import'codemirror/lib/codemirror.css'impor......
  • 我的Vue之旅 07 Axios + Golang + Sqlite3 实现简单评论机制
    第三期·使用Vue3.1+TailWind.CSS+Axios+Golang+Sqlite3实现简单评论机制效果图CommentArea.vue我们需要借助js的Data对象把毫秒时间戳转化成UTCStrin......
  • vue 文件打包太大 -- 体积优化
    最新打包vuecli4.5项目时,体积尽然达到了9M,页面访问的速度,因此进行尝试进行优化,最终压缩到968k,效果明显。下面是优化方法。首先新建文件'vue.config.js',放在项目根目......
  • vue之axios
    什么是axios?Axios是一个基于promise的HTTP库,可以用在浏览器和node.js中。特性1从浏览器中创建XMLHttpRequests2从node.js创建http请求3支持PromiseAPI4......
  • 【Vue】图片拉近、全屏背景实战经验总结
    1图片拉近缘起是看到了下面的图片,我发现当鼠标悬浮的时候,发现他是可以拉近的,也就是图片的宽高不变,但是图片被放大了起初我以为是有一个这样的方法,可以实现这个操作,但是查找......
  • 从0搭建vue3组件库:Shake抖动组件
    先看下效果其实就是个抖动效果组件,实现起来也非常简单。之所以做这样一个组件是为了后面写Form表单的时候会用到它做一个规则校验,比如下面一个简单的登录页面,当点击登录......