я создаю приложение для заказа еды с laravel и vue.js.Когда пользователь выбирает блюдо на заказ и нажимает кнопку «Добавить в корзину», вызывается модель дополнения к еде, чтобы узнать, есть ли надстройка, связанная с выбранной едой (есть связь между двумя моделями),и если есть / есть, появляется модальное окно, показывающее надстройки (только если есть), в противном случае выбранное блюдо просто добавляется в корзину, и пользователь переходит к оформлению заказа.Чтобы добиться этого, я обернул родительский модальный div с v-if, как это делается.Однако проблема заключается в том, что каждый раз, когда я нажимаю на кнопку «Добавить в корзину», появляется модальное окно, даже когда в выбранной еде нет надстроек.Как мне структурировать это, чтобы модальное всплывающее окно появлялось только при наличии соответствующих надстроек для отображения.Мой код извлекает: Кнопка триггера (Добавить в корзину):
<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>