如何使用vue.js有條件地觸發模式

Question

我正在使用laravel和vue.js構建食品訂購應用程序。 當用戶選擇要訂購的餐點並單擊“添加到購物車”按鈕時，會調用附加餐點模型，以查看是否存在與所選餐點相關的附加項（這兩種模型之間的關系），如果有/有，則會彈出一個顯示附加組件的模式框（僅在有附加組件的情況下），否則所選的餐點只會添加到購物車中，用戶便會繼續結帳。 為了達到這個目的，我像這樣用v-if包裹了父模態div。 但是，問題是，即使我選擇的餐食沒有附加組件，每次我單擊“添加到購物車”按鈕時，都會彈出模態。 僅當有相關的附加組件要顯示時，如何構造此結構以使模式彈出。 我的代碼摘錄：觸發按鈕（添加到購物車按鈕）：

<button class="btn btn-default" @click="add_to_cart(order)" data-toggle="modal" data-target="#addon_modal"> + </button> 

我的模態div：

<div v-show="addon">
  <div class="modal fade" id="addon_modal" tabindex="-1" role="dialog">
     <div class="modal-dialog"> 
        <div class="modal-content">
            <div class="modal-header">
               <h4 class="modal-title text-center">Modal title</h4>
            </div>
            <div class="modal-body">
                <p>List of add-ons here</p>
            </div>
            <div class="modal-footer">
                //buttons to add add-ons to cart and to dismiss modal here
            </div>
        </div>
      </div>
    </div>
</div>

我的劇本：

<script>
    export default {
        data(){
            return {
                order: [],
                addon: false,
            }
        },
        methods: {
           add_to_cart(order){
               if(order.add_on.length > 0){
                   this.addon = true
               }
           }
       }
   }
</script>

Answer 1

使用v-if代替v-show將解決您的問題

<div v-if="addon">
  <div class="modal fade" id="addon_modal" tabindex="-1" role="dialog">
     <div class="modal-dialog"> 
        <div class="modal-content">
            <div class="modal-header">
               <h4 class="modal-title text-center">Modal title</h4>
            </div>
            <div class="modal-body">
                <p>List of add-ons here</p>
            </div>
            <div class="modal-footer">
                //buttons to add add-ons to cart and to dismiss modal here
            </div>
        </div>
      </div>
    </div>
</div>

演示https://jsfiddle.net/ittus/k91kcd9x/1/

如果使用jquery，則可以以編程方式打開模式