Custom validator with twoway filter changing value displayed in textbox

[codylandry]

I'm having an issue where when I apply a custom validator and a custom twoway filter, the value that appears in the textbox changes. The data in the model is correct, but the value in the textbox is wrong. I can't seem to reproduce this in a jsfiddle, but I can give you pieces of my code.

Here is the custom validator. PhoneNumber is from an npm package called awesome-phonenumber
I've added it in the example file in comments.

The problem comes when you toggle the element with v-if. When you hide it, and then show it again, the value in the textbox is wrong and the valid state goes false.

I hope this is enough to help you find the problem. Let me know if you need more clarification. Thanks. Love vue-validator.

before input:

with valid input:

after toggling v-if:

after toggling v-if again:

<template>
    <div>
        <validator name="phone">
            <button @click="show = !show">toggle</button>
        <input v-model="testPhone | phoneNumber"
               class="form-control"
               @click.stop=""
               name="editPhone"
               v-validate:edit-phone="{phone: 'US'}" v-if="show">
            <br>
            data:
            <pre>[[$data | json]]</pre>
            validation:
            <pre>[[$phone | json]]</pre>
        </validator>
    </div>
</template>



<script>

//Vue.validator('phone', {
//  message: 'invalid phone number', // error message with plain string
//  check: function (val, countryCode) { // define validator
//    if (!val) return false
//      return PhoneNumber(val, countryCode).isValid()
//  }
//})


    import PhoneNumber from 'awesome-phonenumber'
    export default{
        data(){
            return {
                testPhone: '',
                show: true
            }
        },
        filters: {
            phoneNumber: {
                read: function (val) {
                    console.log(val)
                    if (typeof val === 'undefined') {
                        return ''
                    }
                    let pn = new PhoneNumber(val, 'US')
                    console.log(pn)
                    console.log(pn.getNumber('national'))
                    return pn.getNumber('national')
                },
                write: function (val) {
                    let pn = new PhoneNumber(val, 'US')
                    return pn.getNumber('significant')
                }
            }
        }
    }
</script>

<style>
    body {
        background-color: #FFF;
    }
</style>

[kazupon]

@codylandry
Thank you for your reporting !!
Sorry for the late response.

I checked the this issues.
http://jsfiddle.net/kazupon/po0zsgxr/5/

I'll try to fix. 😸

[codylandry]

I tried to test the fix by replacing vue-validator in the jsfiddle and it still behaves the same. After toggling the v-if back on, nothing is displayed in the textbox.

http://jsfiddle.net/cobby4h3/1/

[kazupon]

http://jsfiddle.net/cobby4h3/1/

I think that jsdelivr is strange ...
https://cdn.jsdelivr.net/vue.validator/2.0.0-beta.2/vue-validator.min.js

I hosted 2.0.0.beta.2 with dropbox.
http://jsfiddle.net/kazupon/xkvs4gnv/3/

In the above jsfiddle, it works.

[codylandry]

Awesome. Thanks for the fast response!