как быть не жестко закодированным для Buefy type in vue.js


как быть не жестко закодированным для Buefy type in vue.js

15.09.2020 12:33:07 Просмотров 38 Источник
<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.

Вот информация о чекбоксе buefy.

У вопроса есть решение - Посмотреть?

Ответы - как быть не жестко закодированным для Buefy type in vue.js / how to be not hardcoded for Buefy type in vue.js

Является ответом!
Tibebes. M

15.09.2020 01:09:07

Вы можете использовать директиву v-bind для динамического изменения атрибутов.

Вот пример для начала работы:

<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 (не будут обновляться при изменении данных)

Помочь в развитии проекта:
Закрыть X