watch in the vue component listens for changes to the formSearch, but if you modify the formSearch.memberPhone while listening, you can"t listen. There was no problem with writing it in the page before, but now it is extracted into a component
.<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>