Change labels to other language

[souzadavi]

Please could you give some example to change the labels to other language? I didn't figure out how to translate the Card Holder and Expires info on card image.

Thanks to share this improvement, i'm using on quasar project.

[guastallaigor]

Hello @souzadavi A basic example would be something like this:

<template>
  <div id="app">
    <vue-paycard :value-fields="valueFields" :labels="labels" />
  </div>
</template>

<script>
export default {
  data: () => ({
    labels: {
      cardName: "Igor Guastalla",
      cardHolder: "Nome Completo",
      cardMonth: "MM",
      cardYear: "YY",
      cardExpires: "Expiração",
      cardCvv: "CVV",
    },
    valueFields: {
      cardName: "",
      cardNumber: "",
      cardMonth: "",
      cardYear: "",
      cardCvv: "",
    },
  }),
};
</script>

You will need to make the labels prop dynamic, maybe using a computed property in your project, if you want to support multiple languages.

Maybe the problem you had is because I notice that storybook has a bug in version 6.0+ using object knobs. I migrate it to controls and now everything should work fine.

Anything else, let me know.