如何使用 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，可以open modal programmatically