使用 Vue Js 的动态模板（组件）问题 Class 绑定问题

Question

我尝试制作动态模板以根据条件分配 class。

我的模板是：

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

但是，如果我尝试在 "class" 中分配，则仅作为文本显示。我也试过原生 class 。我无法将 pros(block_class) 传递给模板。

有什么可能的方法来处理这个问题？

我正在使用 Laravel。

Answer 1

您可以使用 dynamic styling 来执行此操作，

您可以将 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>

使用 Vue Js 的动态模板（组件）问题 Class 绑定问题

Dynamic Template (Component) Probs to Class Binding Issue using Vue Js

html

javascript

vue.js

vue-component