Проблема передачи параметра в шаблон как переменную в HTML с помощью Vue JS

Question

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

Поэтому мне нужно передать атрибуты и переменные в шаблон, и каждый шаблон имеет разные значения.

Я сделал на передачу атрибутов, но вопрос о передаче значения переменной.

Вот,

Мой 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>

Здесь я должен передать значение 1. product_name, 2. product_price, 3. showAction

Также атрибуты Class и Align успешно передаются.

Мой шаблон:

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

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

У меня только проблемы с передачей переменных в шаблон.

Возможна ли эта концепция?

Или любое другое решение этой проблемы?

Заранее спасибо.

Answer 1

Какую именно ошибку вы получаете. Я исправил несколько ошибок, проверьте ниже:

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

Вот документация по использованию динамического класса в vueJs.