如何不对 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，输出不同的字符串。但是这里的类型不能识别这里的方法。我这里也不能用字符串+字符串。

Here is information关于buefy的复选框。

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 属性（不会在数据更改时更新）