<template>
  <div>
    <b-jumbotron>
      <h1>QR Code</h1>
      <p class="lead">QR Code generator.</p>

      <b-form @submit.prevent="false">
        <b-form-group
          id="qrCodeValueInputGroup"
          label="Value :"
          label-for="qrCodeValueInput"
        >
          <b-form-input
            id="qrCodeValueInput"
            type="text"
            v-model="value"
            placeholder="Value"
          >
          </b-form-input>
        </b-form-group>
      </b-form>

      <qrcode-vue :value="value" size="200" level="H"></qrcode-vue>
    </b-jumbotron>

    <page-footer></page-footer>
  </div>
</template>

<script>
  import QrcodeVue from 'qrcode.vue';

  export default {
    name: 'QrCode',
    data () {
      return {
        value: '',
      };
    },
    components: {
      QrcodeVue,
    },
  };
</script>

<style scoped>

</style>

<template>
  <div>
    <b-jumbotron>
      <h1>QR Code</h1>
      <p class="lead">QR Code generator.</p>

      <b-form @submit.prevent="false">
        <b-form-group
          id="qrCodeValueInputGroup"
          label="Value :"
          label-for="qrCodeValueInput"
        >
          <b-form-input
            id="qrCodeValueInput"
            type="text"
            v-model="value"
            placeholder="Value"
          >
          </b-form-input>
        </b-form-group>

        <b-form-group
          id="qrCodeLevelInputGroup"
          label="Error correction level :"
          label-for="qrCodeLevelInput"
        >
          <b-form-select
            id="qrCodeLevelInput"
            v-model="level"
            :options="levelsSelectOptions"
          >
          </b-form-select>
        </b-form-group>
      </b-form>

      <qrcode-vue :value="value" size="200" :level="level"></qrcode-vue>
    </b-jumbotron>

    <page-footer></page-footer>
  </div>
</template>

<script>
  import QrcodeVue from 'qrcode.vue';

  export default {
    name: 'QrCode',
    data () {
      return {
        value: '',
        level: 'H',
      };
    },
    computed: {
      levelsSelectOptions: function () {
        return [
          { value: 'L', text: 'Level L' },
          { value: 'M', text: 'Level M' },
          { value: 'Q', text: 'Level Q' },
          { value: 'H', text: 'Level H' },
        ];
      },
    },
    components: {
      QrcodeVue,
    },
  };
</script>

<style scoped>

</style>

Implement the error correction level select
Implement the error correction level select
