javascript - 使用 Vue JS 将参数作为 Html 中的变量传递给模板的问题

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>

Here是vueJs中使用动态类的文档。