動態模板（組件）檢測到類綁定問題使用Vue Js

-1

我嘗試使動態模板按條件庫分配類。動態模板（組件）檢測到類綁定問題使用Vue Js

我的模板是：

<template v-if="showTemplate" id="campaignBlock"> 
    <div v-class="@{{ block_class }}"> 
// <div v-class="{ block_class }"> 
    <img src="{{URL::asset('uploads/default.png')}}"> 
    </div>

調用模板：

<input type="button" @click="nb += 1" class="btn btn-default" value="Add New Section"> 
<div v-for="a in nb"> 
    <block v-if="nb == 4" block_class="col-md-3 col-sm-6 col-xs-6"></block> 
    <block v-if="nb == 3" block_class="col-md-4 col-sm-6 col-xs-6"></block> 
    <block v-if="nb == 2" block_class="col-md-6 col-sm-6 col-xs-6"></block> 
    <block v-if="nb == 1" block_class="col-md-12 col-sm-6 col-xs-6"></block> 
</div>

VueJs：

Vue.component('block', { 
    template: '#campaignBlock', 
    props: ['block_class'], 
    data: function() { 
     return { 
      n: 0, 
      nb: 1, 
      block_class: 'col-md-3 col-sm-6 col-xs-6' 
     } 
    } 
});

在這裏，如果我增加列，然後我得到預期道具的價值模板作爲變量。

ex。 <div v-class="{{ block_class }}">

但是，如果我嘗試在「類」中指定，只是以文本形式呈現。我也嘗試過本土課程。我無法將pros(block_class)傳遞給模板。

任何可能的方式來處理這個問題？

我正在使用Laravel。

來源

2016-11-29 Shankar Thiyagaraajan

當在你的問題中添加HTML代碼片段，它們必須被「反引號包圍」，以便可見。請務必在發佈前使用預覽功能閱讀您的問題，以節省編輯人員的時間，並明確您的要求。此外，不要求緊急或任何特殊待遇 - 志願者可能會在閒暇時回答您的問題。 – halfer

哦...對不起，其實我只是從論壇這裏回來... 我忘了刪除那個「單詞」.... 感謝您的注意！ –

如果將其粘貼到別處，您是否會添加已交叉發佈的鏈接？首先這樣做是很好的，這樣有幫助的人回答不會意外地重複你在另一個地方接收到的幫助。 – halfer

可以使用dynamic styling這樣做，

您可以通過在道具對象哈希到組件類似以下內容：

<input type="button" @click="nb += 1" class="btn btn-default" value="Add New Section"> 
<div v-for="a in nb"> 
    <block v-if="nb == 4" block_class="{'col-md-3': true, 'col-sm-6': true, 'col-xs-6': true"></block> 
</div>

，並在模板代碼：

<template v-if="showTemplate" id="campaignBlock"> 
    <div :class="block_class"> 
// <div :class="block_class"> 
    <img src="{{URL::asset('uploads/default.png')}}"> 
    </div>

來源

2016-11-29 08:49:15 Saurabh

謝謝Q ...它的工作... –

什麼abt消除vueJs中的元素...？ –

@ShankarThiyagaraajan你可以詳細說明一下，v-if或v-show應該能夠提供幫助。也是這個問題沒有關係，你可以接受這個答案，並提出有關細節的另一個問題。 – Saurabh

動態模板（組件）檢測到類綁定問題使用Vue Js

回答

相關問題