@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

+-- [email protected]
+-- [email protected]
| `-- [email protected]
|   `-- [email protected]  deduped
+-- [email protected]
| `-- [email protected]
+-- [email protected]
| `-- [email protected]  deduped
+-- [email protected]
| `-- [email protected]  deduped
+-- [email protected]
| `-- [email protected]  deduped
+-- [email protected]
| `-- [email protected]  deduped
`-- [email protected]
  `-- [email protected]  deduped

npm info v-credit-card

[email protected] | 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!