如何不对 vue.js 中的 Buefy 类型进行硬编码

Question

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

大家好，我正在使用 Buefy 和 Vue.js。我希望类型灵活。这就是我在这里使用该方法的原因。根据不同的I，输出不同的字符串。但是在这里键入不识别这里的方法。我这里也不能用string + string.

Here is information关于buefy的checkbox。

Answer 1

您可以使用 v-bind directive 动态更改属性。

这是一个入门示例：

<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>

最后一件事，您仍然可以在那里使用方法（只需在属性名称前添加 : - 如 :type="checkType(i)"），但该函数只会被评估一次，并且任何进一步的数据更改不会反映在 type 属性上（不会在数据更改时更新）

如何不对 vue.js 中的 Buefy 类型进行硬编码

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

vue.js

bulma

buefy