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中使用动态类的文档。

使用Vue JS将模板作为变量传递给Html的问题

1 个答案: