how to be not hardcoded for Buefy type in vue.js

Question

<b-checkbox v-model="selectedTiers" :native-value="i" type="checkType(i)" @input="update">
    {{ $t('general.specificTier', { tier: i }) }}
</b-checkbox>

Hi everyone, I am using Buefy and Vue.js. I want the type to be flexible. That is why I am using the method here. according to different I, it outputs a different string. But type here doesn't recognize the method here. I also can't use string + string here.

Here is information about checkbox of buefy.

Answer 1

You can use v-bind directive to dynamically alter the attributes.

Here is an example to get your started:

<template>
  <div id="app">
    <!-- Example with string manipulation -->
    <b-checkbox :type="`is-${type}`">TEST 1</b-checkbox>

    <!-- Example by reading off compenent-data -->
    <b-checkbox :type="checkboxType">TEST 2</b-checkbox>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      type: 'success',
      checkboxType: "is-success"
    };
  }
};
</script>

One last thing, you can still use a method there (just add : before the attribute name - like :type="checkType(i)"), but the function would only be evaluated once and any further data changes won't be reflected on the type attribute (won't update on data change)