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

如何使用vue.js有条件地触发模态

1 个答案: