Vue3无法用watch监听到通过ref定义的div内容的改变

哈普洛斯

于 2023-02-07 04:47:43 发布

阅读量1k

点赞数 1

文章标签：前端 vue.js javascript

本文链接：https://blog.youkuaiyun.com/LK555666/article/details/128910945

版权

在Vue组件中，使用ref绑定的contenteditablediv的innerText变化无法被watch监听到。当向div输入数据时，预期content的内容应更新，但实际上并未触发watch。需要找到一种方法来监听contenteditable元素内数据的变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

源码如下：

div设置了contenteditable属性，但是其中的通过ref绑定的数据监听不到变化

<script setup>
import {onMounted, ref,watch} from "vue"

let textbox = ref('')
onMounted(()=>{
        let content = ref(textbox.value.innerText)
        console.log(content)  //打印还是一个数据代理而不是值
        console.log(textbox.value.innerText) //打印的却是一个值 
        // 监视不到数据的改变  
        watch(content,(newValue,oldValue)=>{
                console.log(newValue,oldValue)
        })
})
</script>

<template>
        <div class="bbox">
                <div id="box" ref="textbox" contenteditable >出现问题</div>
        </div>
</template>

输出打印如下：

向div中输入数据时，理论上content的内容应该改变了，但是watch监听不到，没有输出任何内容

该如何解答？？有什么方法可以监听到其中的数据变化吗？？