@change not working

[sdwru]

For some reason @change is not working. If I leave everything else the same and change it to @cardChanged it starts working on console.log showing the card type as soon as I start typing in numbers. So it's just @change that doesn't work. I don't see any errors in the chrome developer console or vue console.

I tried registering globally and locally.

 npm list vue

+-- vue@2.6.11
+-- vue-acl@4.0.7
| `-- vue-e-bus@1.0.0
|   `-- vue@2.6.11  deduped
+-- vue-backtotop@1.6.1
| `-- vue@2.3.3
+-- vue-fullcalendar@1.0.9
| `-- vue@2.6.11  deduped
+-- vue-simple-calendar@4.4.0
| `-- vue@2.6.11  deduped
+-- vue-tour@1.4.0
| `-- vue@2.6.11  deduped
+-- vue-tree-halower@1.8.3
| `-- vue@2.6.11  deduped
`-- vuesax@3.11.1
  `-- vue@2.6.11  deduped

npm info v-credit-card

v-credit-card@1.2.4 | MIT | deps: 2 | versions: 14
Beautiful credit card form component for vueJS

I am running npm run serve for http access.

I tried going into the compiled dist code and adding console.log to the computed and watcher function. Neither of them appear to fire.

computed: {
     fields: function fields() {
         console.log('computed fields() fired');
         return [this.form.name, this.form.cardNumber, this.form.expiration, this.form.security].join('');
     }
...
...
watch: {
    fields: function fields() {
      console.log('@change emitter fired');
      this.$emit('change', Object.assign({}, this.$data.form));
    }

[hugomejia]

Yup, is true. I ran into the same issue. The solution I found was to watch directly the form with the card data usign the "deep" property like this: form: { deep:true, handler: function handler(newV, oldV) { this.$emit('dataChanged', newV); } } just add it to your VCreditCard.ums.js and VCreditCard.common.js files within the watch property, and now listen to the dataChanged event like you normally do, <VCreditCard @dataChanged="dataChange"/>, you can now define the dataChange method within the parent component and do whatever you need with your data.

Hope it helps!