账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue 抽离成组件后watch不能正常监听
    22
    0

    vue组件中watch监听formSearch的修改,但是在监听中修改formSearch.memberPhone就监听不到了,之前写在页面中没有问题,但是现在抽离成组件就这样了

    <template lang="pug">
    div.vip-search-bar.flex.border-bottom
                Form.search-from(
                    inline :label-width="60"
                    :model="formSearch"
                    ref="formSearch")
                    div
                        FormItem(label="会员卡号" )
                            Input.s-input(v-model="formSearch.memberSn"  placeholder="请输入...")
                        FormItem(label="姓名")
                            Input.s-input(v-model="formSearch.memberName" placeholder="请输入...")
                        FormItem(label="手机号" prop="memberPhone")
                            Input.s-input(
                                v-model="formSearch.memberPhone" placeholder="请输入...")
                    div
                        FormItem(label="注册时间")
                            DatePicker.datePicker.l-input(
                                placeholder="请输入..."
                                :options="datePickerOption"
                                type="daterange"
                                v-model="formSearch.time")
                Button.btn-search(@click="search") 查询
    </template>
    <script>
    export default {
        name: 'VipSearch',
        data () {
            let _that = this
            return {
                formSearch: {}, // 搜索表单
                // 设置快捷选项,每项内容
                datePickerOption: {
                    shortcuts: [
                        {
                            text: '最近一周',
                            value () { return     _that.getDatePickerData(7)    }
                        },
                        {
                            text: '最近一个月',
                            value () { return     _that.getDatePickerData(30)    }
                        },
                        {
                            text: '最近三个月',
                            value () { return     _that.getDatePickerData(90)    }
                        }
                    ]
                }
                // 搜索验证
                // searchRules: {
                //     memberPhone: [
                //         {validator: this.phoneCheck, trigger: 'blur'}
                //     ]
                // },
            }
        },
        watch: {
            formSearch: {
                handler (nv, ov) {
                    this.$nextTick(() => {
                        let num = parseInt((nv.memberPhone + '').replace(/[^\d]/g, ''))
                        if (isNaN(num)) {
                            this.formSearch.memberPhone = ''
                        } else {
                            this.formSearch.memberPhone = num
                        }
                    })
                },
                deep: true
            }
    
        },
        methods: {
            search () {
                this.$refs.formSearch.validate(valid => {
                    if (!valid) { return    }
                    this.$emit('search', this.formSearch)
                })
            },
            getDatePickerData (day) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * day)
                return [start, end]
            }
        }
    }
    </script>
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部