昆明交通违章查询网
Vue3解决ref赋值为require（‘‘）时数据⽆法响应问题
Vue3解决ref赋值为require(’’)时数据⽆法响应问题
问题代码：
const useIcon=()=>{
let iconSrc =ref('');临沂到上海
let setupModelShow =ref(false);
iconSrc =require('../assets/img/url.png');
const handleServe=()=>{
iconSrc = setupModelShow.value ?require('../assets/img/url.png'):require('../assets/img/url-active.png');
console.log(iconSrc);
setupModelShow.value =!setupModelShow.value;天津一汽丰田卡罗拉
}
tx是什么意思return{
iconSrc,
setupModelShow,
handleServe,
}
};
上⾯代码中iconSrc确实在变化，但页⾯上并没有更新。
问题原因：ref()只能监听简单数据类型，此处应监听为字符串，⽽不是直接监听require()返回值（require()返回值是⼀个模块）。问题解决（将require()返回值显⽰转化为String类型即可）：
const useIcon=()=>{
宝来降价
宁波市交通违法查询let iconSrc =ref(String(require('../assets/img/url.png')));
let setupModelShow =ref(false);
const handleServe=()=>{
iconSrc.value = setupModelShow.value ?require('../assets/img/url.png'):require('../assets/img/url-active.png');
setupModelShow.value =!setupModelShow.value;
}
return{
iconSrc,
setupModelShow,
handleServe,
}
};