Как добавить класс Dynami c bootstrap с vue. js?

Question

Я учусь vue. js. Я хотел бы добавить значения класса Dynami c в мой шаблон. Однако, когда я пытаюсь добавить класс bootstrap 4, появляется следующая ошибка:

v-bind' directives require an attribute value

Я поместил значение true в класс img-fluid, но не решил проблему. Мой шаблон выглядит следующим образом:

<template>
    <div>
        <div class="row justify-content-center align-items-center">
            <img src="images/retro.jpg" v-bind:class="{card:true, invisible:pc_left_invisible}" id="pc_left" v-bind:rel="pc_left_rel">
            <img src="images/retro.jpg" v-bind:class="{card:true, invisible:pc_center_invisible}" id="pc_center" v-bind:rel="pc_center_rel">
            <img src="images/retro.jpg" v-bind:class="{card:true, invisible:pc_right_invisible}" id="pc_right" v-bind:rel="pc_right_rel">
        </div>
        <div class="row">
            <div class="col-3 d-flex justify-content-start">
                <img src="images/retro.jpg" v-bind:class="{card:true, invisible:pack_cards_invisible}" id="pack_cards" rel="0">
            </div>
            <div class="col-6 d-flex justify-content-center">
                <img v-bind:src="pc_game_src" v-bind:class="{card:true, invisible:pc_game_invisible, img-fluid: true}" id="pc_game" v-bind:rel="pc_game_rel"> <!--here the error-->
                <img v-bind:src="player_game_src" v-bind:class="{card:true, invisible:player_game_invisible}" id="player_game" v-bind:rel="player_game_rel">
            </div>
            <div class="col-3 d-flex justify-content-end">
                <img v-bind:src="game_briscola_src"  v-bind:class="{card:true, invisible:game_briscola_invisible}" id="game_briscola" v-bind:rel="game_briscola_rel">
            </div>
        </div>
        <div class="row justify-content-center align-items-center">
            <img @click="play($event)" v-bind:src="player_left_src" v-bind:class="{card:true, invisible:player_left_invisible}" id="player_left" v-bind:rel="player_left_rel">
            <img @click="play($event)" v-bind:src="player_center_src" v-bind:class="{card:true, invisible:player_center_invisible}" id="player_center" v-bind:rel="player_center_rel">
            <img @click="play($event)" v-bind:src="player_right_src" v-bind:class="{card:true, invisible:player_right_invisible}" id="player_right" v-bind:rel="player_right_rel">
        </div>
    </div>
</template>

Это раздел стилей:

<style scoped>
.card {
    border-radius: 10%;
    height: 30vh;
    width: 20vh;
}
</style>

Итак, класс, который создает проблемы, это bootstrap class img-fluid. Может помочь?

Answer 1

На самом деле это простая javascript проблема, так как в javascript у нас не может быть ключа объекта с дефисом -, например:

const obj = { img-fluid: true }
console.log( obj )
//==> Uncaught SyntaxError: Unexpected token '-'

Вы можете использовать ключ с дефисом, чтобы получить синтаксическую ошибку. Мы можем легко решить эту проблему, заключив ключ в кавычки, такие как:

const obj = { 'img-fluid': true }
console.log( obj )

Итак, в vuejs также вы можете исправить это как:

v-bind:class="{card:true, invisible:pc_game_invisible, 'img-fluid': true}"