使用 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'
        }
    }
});

在這里，如果我增加列，那么我會在模板中獲得預期的道具值作為變量。

前任。 <div v-class="{{ block_class }}">

但是，如果我嘗試在“類”中分配，則僅以文本形式呈現。 我也嘗試過本地課程。 我無法將pros(block_class)傳遞給模板。

有什么可能的方法來處理這個問題？

我正在使用 Laravel。

Answer 1

您可以使用動態樣式來執行此操作，

您可以將 props 中的對象哈希傳遞給組件，如下所示：

<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>