Как запустить computed в VUE3?

Question

[evomed]

Вот код из script setup, который не работает.

<script setup>
import {ref, computed} from 'vue';

defineProps({
    showBgBlue: {
        type: Boolean,
        default: true
    },
});

const mainClass = computed({
    get() {
        var class = '';
        
        if (this.showBgBlue) {
            class = 'bg-blueGray-50 py-12';
        }else{
            class = 'bg-white';
        }
        
        return class;
    }
});
</script>

Comments

[Farkl]

какой vue, иди учи js

[evomed]

Farkl, иди рыбкой плыви

[Farkl]

evomed, вот так вот стараешься помочь человеку, а он...

Answer 1

[0xD34F]

Ключевое слово в качестве имени переменной - что за бред?
Как достучаться до параметров из script setup - читаем документацию.
У вычисляемого свойства нет сеттера - так пусть будет функцией, объект не нужен.

Исправляем:

const props = defineProps({
  showBgBlue: {
    type: Boolean,
    default: true,
  },
});

const mainClass = computed(() => props.showBgBlue ? 'bg-blueGray-50 py-12' : 'bg-white');

Comments

[Антон Антон]

Похоже используется tailwind. Если не ошибся, то добавлю, что при таком синтаксисе нужно ещё все упоминаемые классы засэйфлистить: https://tailwindcss.com/docs/content-configuration...

[evomed]

Такой computed я могу сделать, но мне нужен с if и объявлением переменной т.к. далее будет собираться строка в более сложной логике.

[evomed]

Антон Антон, верно, tailwind

[Антон Антон]

evomed, ну дай другой имя переменной

[evomed]

Антон Антон, помогло