Vue JSを使用してHtmlの変数としてテンプレートにparamを渡す際の問題

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の値を渡す必要が

クラスおよびアライメントの属性は正常に渡されます。

マイテンプレート：

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

HereがvueJsで動的クラスを使用してのドキュメントです：私は以下を確認して、いくつかのミスを修正しました。