在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML5  HTML/ vue 抽離成組件后watch不能正常監(jiān)聽(tīng)

vue 抽離成組件后watch不能正常監(jiān)聽(tīng)

vue組件中watch監(jiān)聽(tīng)formSearch的修改,但是在監(jiān)聽(tīng)中修改formSearch.memberPhone就監(jiān)聽(tīng)不到了,之前寫(xiě)在頁(yè)面中沒(méi)有問(wèn)題,但是現(xiàn)在抽離成組件就這樣了

<template lang="pug">
div.vip-search-bar.flex.border-bottom
            Form.search-from(
                inline :label-width="60"
                :model="formSearch"
                ref="formSearch")
                div
                    FormItem(label="會(huì)員卡號(hào)" )
                        Input.s-input(v-model="formSearch.memberSn"  placeholder="請(qǐng)輸入...")
                    FormItem(label="姓名")
                        Input.s-input(v-model="formSearch.memberName" placeholder="請(qǐng)輸入...")
                    FormItem(label="手機(jī)號(hào)" prop="memberPhone")
                        Input.s-input(
                            v-model="formSearch.memberPhone" placeholder="請(qǐng)輸入...")
                div
                    FormItem(label="注冊(cè)時(shí)間")
                        DatePicker.datePicker.l-input(
                            placeholder="請(qǐng)輸入..."
                            :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: {}, // 搜索表單
            // 設(shè)置快捷選項(xiàng),每項(xiàng)內(nèi)容
            datePickerOption: {
                shortcuts: [
                    {
                        text: '最近一周',
                        value () { return     _that.getDatePickerData(7)    }
                    },
                    {
                        text: '最近一個(gè)月',
                        value () { return     _that.getDatePickerData(30)    }
                    },
                    {
                        text: '最近三個(gè)月',
                        value () { return     _that.getDatePickerData(90)    }
                    }
                ]
            }
            // 搜索驗(yàn)證
            // 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>
回答
編輯回答
遺莣

在formSearch中添加對(duì)應(yīng)屬性就可以了

2017年9月20日 19:26
編輯回答
眼雜
 FormItem(label="手機(jī)號(hào)" prop="memberPhone")

改為

 FormItem(label="手機(jī)號(hào)")

可以嗎

2018年9月14日 23:43