Issue on Passing param to Template as Variable in Html Using Vue JS

Question

I use Vue js to implement template system, its completely dynamic.

So i need to pass attributes and variables to template and each template has different values.

I done on passing attributes, but issue on passing value of a variable.

Here,

My HTML :

      <div v-for="product in productsList">
                  <block v-if="column == 4 || column > 4"
                      :listAlign="showList ? 'left' : 'center'"
                      :product_name = product.name
                      :showAction="showAction"
                      :block_class="showList ? 'col-md-12 col-sm-12 col-xs-12' : 'col-md-3 col-sm-6 col-xs-6'">
                  </block>
      </div>

Here, i have to pass the value of 1. product_name, 2. product_price, 3. showAction

Also the Class and Align attributes are passed successfully.

My Template :

    <template v-if="showTemplate" id="campaignBlock">
        <div :class="block_class" :align="listAlign">
             <p>@{{ product_name }}</p>
             <p>Price : @{{ product_price }}</p>
             <input v-show="showAction" type="button" @click="alt()" class="btn btn-default
                    " value="Action">
        </div>
   </template>

My VueJS :

Vue.component('block', {
template: '#campaignBlock',
props: ['block_class', 'align', 'listAlign','showAction', 'product_name','product_name'],
data: function () {
    return {
        n: 0,
        nb: 1,
        column: 2,
        showPrice: false,
        showAction: true,
        showList: false,
        listAlign: 'left'
    }
   }
 });

I only having trouble with passing variables to template.

Is this concept is possible ?

Or any other solution for this issue ?

Thanks in Advance.

tony19 · Accepted Answer · 2022-07-16 02:05:36Z

1

What exactly error you are getting. I have corrected few mistakes, check below:

<template>
    <div v-if="showTemplate" id="campaignBlock">
    <div :class="{'col-md-12' : block_class_var}" :align="listAlign">
         <p>{{ product_name }}</p>
         <p>Price : {{ product_price }}</p>
         <input v-show="showAction" type="button" @click="alt()" class="btn btn-default
                " value="Action">
    </div>
    </div>
</template>

Here is the documentation of using dynamic class in vueJs.

edited Jul 16, 2022 at 2:05

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Dec 1, 2016 at 7:09

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Shankar Thiyagaraajan Over a year ago

Its said, product_name & product_price is not defined.

Saurabh Over a year ago

@ShankarThiyagaraajan product_price is not there in the props list also, neither it is passed in the component.

Shankar Thiyagaraajan Over a year ago

This also provide the same. I'm using laravel so i use '@' at prefix.

Collectives™ on Stack Overflow

Issue on Passing param to Template as Variable in Html Using Vue JS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related