Динамический шаблон (компонент) Причиняет привязку к классу с помощью Vue Js

Question

Я пытаюсь сделать динамический шаблон для присвоения класса базой условий.

Мой Шаблон:

<template v-if="showTemplate" id="campaignBlock"> 
    <div v-class="@{{ block_class }}"> 
// <div v-class="{ block_class }"> 
    <img src="{{URL::asset('uploads/default.png')}}"> 
    </div> 

шаблона вызова:

<input type="button" @click="nb += 1" class="btn btn-default" value="Add New Section"> 
<div v-for="a in nb"> 
    <block v-if="nb == 4" block_class="col-md-3 col-sm-6 col-xs-6"></block> 
    <block v-if="nb == 3" block_class="col-md-4 col-sm-6 col-xs-6"></block> 
    <block v-if="nb == 2" block_class="col-md-6 col-sm-6 col-xs-6"></block> 
    <block v-if="nb == 1" block_class="col-md-12 col-sm-6 col-xs-6"></block> 
</div> 

VueJs:

Vue.component('block', { 
    template: '#campaignBlock', 
    props: ['block_class'], 
    data: function() { 
     return { 
      n: 0, 
      nb: 1, 
      block_class: 'col-md-3 col-sm-6 col-xs-6' 
     } 
    } 
}); 

Вот, если я увеличиваю столбцы, то я получаю ожидается реквизит в шаблон как переменная.

ex. <div v-class="{{ block_class }}">

Но, если я пытаюсь назначить в «классе», просто представляю как текст. Кроме того, я тоже пробовал собственный класс. Я не могу передать pros(block_class) в шаблон.

Любой возможный способ справиться с этой проблемой?

Я использую Laravel.

Answer 1

Вы можете использовать dynamic styling для этого,

Вы можете передать объект хэш в реквизите к компоненту, как следующее:

<input type="button" @click="nb += 1" class="btn btn-default" value="Add New Section"> 
<div v-for="a in nb"> 
    <block v-if="nb == 4" block_class="{'col-md-3': true, 'col-sm-6': true, 'col-xs-6': true"></block> 
</div> 

и в коде шаблона:

<template v-if="showTemplate" id="campaignBlock"> 
    <div :class="block_class"> 
// <div :class="block_class"> 
    <img src="{{URL::asset('uploads/default.png')}}"> 
    </div>