vue 每开一次 dialog 时的检查？

Question

我的 index.vue 程式，当进去页面第一个读的档案

<template>
    <div>
        <Table></Table>
        <dataDialog></dataDialog>
    </div>
</template>

<script>
import Table from './table'
import dataDialog from './dataDialog'

export default {
    data() {
        return {
            moduleName: 'advertise',
        }
    },
    components: {
        Table,
        dataDialog,
    },
}
</script>

有多笔资料
从 table 透过按钮 click 事件开启 dialog

<el-button
    @click="handleEdit(scope.row)">
</el-button>
    
handleEdit(row) {
      this.$store.commit(`abc/UPDATE_STATE`, 'dataDialogVisible', true)
},

dialog

export default {
    data() {
        return {
            isUnlimited: false,
        }
    },
    created() {
        this.handleCheckboxUnlimited()
    },
    methods: {
        handleCheckboxUnlimited() {
            if (this.endTime.indexOf('3020') !== -1)
                this.isUnlimited = true
        },
    }
}

我想做到的是
每一笔资料都有一个 endTime
每次开启都检查该笔资料的 this.endTime.indexOf('3020') !== -1
若有则 this.isUnlimited = true
只是 created 是只会执行一次，除非刷新
若是这样有啥方式可以每当开启 dialog 时就（执行 handleCheckboxUnlimited()一次）检查该笔资料的 endTime？

或是说直接存 Vuex 算了⋯⋯⋯⋯

Answer 1

<dataDialog>这个组件定义一个open方法

open(data){
    this.dialogVisiable = true;
    if (this.endTime.indexOf('3020') !== -1)
        this.isUnlimited = true
}

然后在index.vue每次打开点击打开表格中的按钮执行方法()=>this.$refs.dataDialog.open(data)将这一列的数据传递进去即可

Answer 2

export default {
    data() {
        return {
            isUnlimited: false,
        }
    },
    watch: {
        // 这里 visible 可以替换成你代码中的 vuex 属性，用 computed 接受一下，检测改变
        visible(val) {
            val && handleCheckboxUnlimited();
        }
    },
    methods: {
        handleCheckboxUnlimited() {
            if (this.endTime.indexOf('3020') !== -1)
                this.isUnlimited = true
        },
    }
}

Answer 3

isUnlimited 为什么不搞个计算属性

computed: {
   isUnlimited() {
        return this.endTime.indexOf('3020') !== -1
   }
}
 

Answer 4

弹窗做 v-if
大约也不在意这点性能消耗吧