首页 > 其他分享 >vue3 watch

vue3 watch

时间:2023-11-22 10:55:05浏览次数:40  
标签:watch value newval vue3 repeatReminderList row

const filterCommandList = computed(() => {
    timerList.value.forEach((item) => clearInterval(item));
    timerList.value = [];

    let data = repeatReminderList.value;
    return data.map((row) => {
        row.close = false;
        row.lastTime = 0;
        row.countDown = null;
        countdown(row);

        return row;
    });
});

watch(
    () => filterCommandList.value,
    (newval, oldval) => {
        console.log(`ReminderTimerQueue >> 当前循环队列: `, newval);
    }
);

watch(repeatReminderList.value, (val) => {
    debugger;
    if (val.length > 0) {
        repeatReminderList.value.map((row) => {
            row.countDown = null;
            countdown(row);
        });
    }
});

标签:watch,value,newval,vue3,repeatReminderList,row
From: https://www.cnblogs.com/lbx6935/p/17848470.html

相关文章

  • vue3所遇问题
    1. table表格无边框数据乱飞 解决方法:将import{}from'Elementplus'  删去  2.表单无法输入内容 解决方法 :   ref="form"     :model="form333"   ref与:modle 不可重名......
  • vue面试题_vue2和vue3的区别
    1、数据绑定原理不同vue2:vue2的数据绑定是利用ES5的一个API:Object.definePropert()对数据进行劫持,结合发布订阅模式的方式来实现的。vue3:vue3中使用了ES6的ProxyAPI对数据代理。相比vue2.x,使用proxy的优势如下:defineProperty只能监听某个属性,不能对全对象监听可以省去fori......
  • vue3 ts 父子 组件小例子
    <project-tabref="projectTabRef"v-model="form.projectVO":data="parentToChild"@update="updateHandler"></project-tab>//引用组件constProjectTab=defineAsyncComponent(()=>import('./tabsProject.......
  • vue3路由重定向失效
    页面刷新时遇到路由重定向无效的问题,可能是因为路由重定向是在客户端进行的,而页面刷新会重新加载整个应用程序,导致重定向逻辑丢失。为了解决这个问题,你可以使用服务器端的重定向来确保在页面刷新时也能正确地重定向到指定的路由。以下是一种常见的解决方案:在服务器端配置,确保......
  • vue3_Extraneous non-props attributes (class) were passed to component but could
    今天的开发中发现了这个问题Extraneousnon-propsattributes(class)werepassedtocomponentbutcouldnotbeautomaticallyinheritedbecausecomponentrendersfragmentortextrootnodes.原因:是因为vue3中允许在<template>中不设置根节点,所以我在某个页面中......
  • 第六章、Vue3高级
    目录二十四、项目实战细节(二)1、组件设置name属性二十四、项目实战细节(二)1、组件设置name属性<scriptsetup>//Vue3.3后支持defineOptions({name:'组件名',inheritAttrs:false})</script>......
  • vue3 ts 生命周期函数写法
    写法1import{defineAsyncComponent,ref,reactive,onMounted,nextTick,computed,watch}from'vue';//页面加载时onMounted(()=>{ initResize();});//监听双向绑定modelValue的变化watch( ()=>props.modelValue, ()=>{ initModeValueEcho();......
  • vue3 基础-Pinia 可能替代 Vuex 的全局数据状态管理
    Pinia初体验Pinia.js是由Vue.js团队核心成员开发的新一代状态管理器,使用CompositionApi进行重新设计的,也被视为下一代Vuex。Pinia是一个Vue的状态管理库,允许跨组件、跨页面进行全局共享状态,也由于其设计的简洁性、和对typescript的良好支持,取代Vuex指日可待。或许,你在想在vue......
  • 在Vue3中使用Element-Plus分页(Pagination )组件
    在Vue3中使用Element-Plus分页(Pagination)组件开发过程中数据展示会经常使用到,同时分页功能也会添加到页面中。记:在Vue3中使用Element-Plus分页组件与表格数据实现分页交互。开始实现引入表格和分页组件的H5标签。<strong>Element-Plus分页组件使用</strong><div> <el-ta......
  • springboot3+vue3大事件的展示
    跟着黑马老师,做了一遍收获很大 ......