How to change vue.js append outer conditionally

Question

I was wondering how to change my append outer icon with 2 condition,i have tried this code but its not working AND i want to know if there is any way to check if the input is NUMBER in the component? Somebody please help me

<v-text-field
  flat
  solo
  maxlength=16
  :append-outer-icon="form.ktp.length !== 16 && isInteger(form.ktp) ? '' : 'mdi-checkbox-marked-circle'"
  v-model="form.ktp"
></v-text-field>

Answer 1

From the docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isInteger

isInteger needs to be used like this Number.isInteger

The correct form should be as follows:

<v-text-field
  flat
  solo
  maxlength=16
  :append-outer-icon="form.ktp.length !== 16 && Number.isInteger(form.ktp) ? '' : 'mdi-checkbox- 
  marked-circle'"
  v-model="form.ktp"
></v-text-field>

Answer 2

Use .numbers modificator to cast your v-model in Number if the string is valid. https://vuejs.org/v2/guide/forms.html#number

Then put your icon condition in a computed, it should work better

<v-text-field
  flat
  solo
  maxlength=16
  :append-outer-icon="iconName"
  v-model.number="form.ktp"
/>


.....

computed: {
  iconName() {
    return !(this.form.ktp && this.form.ktp.length !== 16) && 'mdi-checkbox-marked-circle'
  }
}

Answer 3

So in the end i solve it myself other way,i tried to using v-text-field slot append outer and accept only number keypress on my text field with this code.

<v-text-field
  flat
  solo
  maxlength=16
  @keypress="isNumber($event)"
  onpaste="return false;"
  v-model="form.ktp"
>
   <template slot="append-outer">
     <v-icon v-if="form.ktp.length === 16" color="green darken-2">mdi-checkbox-marked-circle</v-icon>
   </template>
</v-text-field>

And this is for the script

isNumber(evt)
  {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
      evt.preventDefault();;
    } else {
      return true;
    }
  },