current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote -1 down vote favorite
1

I try to make dynamic template to assign the class by condition base.

My Template is :

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

Template Call :

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

Here, if I increase the columns, then I get expected props value in template as a variable.

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

But, if I try to assign in a "class", just present as text. Also I tried native class too. I can't pass the pros(block_class) to the template.

Any possible way to handle this issue?

I'm using Laravel.

share|improve this question
1  
When adding HTML snippets inline in your questions, they must be surrounded by backticks so as to become visible. Please always read your questions through using the preview feature before posting, so as to save the time of editors, and to make it clear what you are asking. Furthermore, do not request urgency or any special treatment - volunteers may get around to your questions at their leisure. – halfer Nov 29 '16 at 9:05
    
Oh...Sorry, actually i just repast here from the forum ... I forget to remove that "word" .... Thanks for noticing ! – Shankar Thiyagaraajan Nov 29 '16 at 10:18
    
If this is pasted elsewhere, would you add the link where you have cross-posted it? It is good to do that in the first instance, so that helpful people who answer do not accidentally duplicate help you have received in another place. – halfer Nov 29 '16 at 10:30
    
Yah... Understand ! – Shankar Thiyagaraajan Nov 29 '16 at 10:33
up vote 1 down vote accepted

You can use dynamic styling for doing this,

You may pass a object hash in props to the component like following:

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

and in the template code:

<template v-if="showTemplate" id="campaignBlock">
   <div :class="block_class">
// <div :class="block_class">
     <img src="{{URL::asset('uploads/default.png')}}">
  </div>
share|improve this answer
    
Thank Q... Its Working... – Shankar Thiyagaraajan Nov 29 '16 at 8:52
    
And what abt removing element in vueJs...? – Shankar Thiyagaraajan Nov 29 '16 at 8:53
    
@ShankarThiyagaraajan Can you elaborate more on that, v-if or v-show should able to help. Also is it is not related to this question, you can accept this answer and ask another question with relevant details. – Saurabh Nov 29 '16 at 8:54
    
In jquery, we can use simply, "jQuery(this).closest('.parent_class).remove();" But in vue js, how could we perform similar action ? – Shankar Thiyagaraajan Nov 29 '16 at 8:56

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.