0

我有以下代码，

Laravel 视图刀片模板

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
         <div class="col-md-8">
            <div id='app'>
             <button type="button" class="btn btn-primary" @click="openModal()">Add Order</button>
             <modal v-if='showModal' @close='showModal = false'></modal>
                 <ul class='list-group'>
                      <li 
                  class='list-group-item' 
                  v-for="order in orders.data.data" 
                  :key="order.id">
                  <strong>@{{ order.status }}</strong>&nbsp;|&nbsp;
                  @{{ order.customer_name }}&nbsp;|&nbsp;
                  @{{ order.shipping_method }} &nbsp;|&nbsp;
                  @{{ order.products }} 

                       <button 
                    @click='openModal(order.id)' 
                    class='btn btn-primary btn-xs float-right mx-1'>
                    Edit
                  </button> &nbsp; 
                  <button 
                    @click='deleteOrder(order.id)' 
                    class='btn btn-danger btn-xs float-right mx-1'>
                      Delete
                   </button> 
                </li> 
              </ul> 
              <pagination :data="orders.data" @pagination-change-page="fetchOrders"></pagination> 
            </div> 
        </div> 
      </div> 
  </div> 
 </div> 

 @endsection

app.js 文件

require('./bootstrap');

window.Vue = require('vue');

Vue.use(require('vue-resource'));

Vue.component('pagination', require('laravel-vue-pagination'));
Vue.component('modal', require('./components/Modal.vue').default);

const app = new Vue({
    el: '#app',
    data(){
      return{
        showModal:false,
        modalType:'',
        orders:{},
        pagination:{
          'current_page':1
        }
      }
    },
    methods:{
      openModal(id){
        if(id == null){
          this.modalType = 'Add';
        }else{
          this.modalType = 'Edit';
        }
        console.log(this.modalType);
        this.showModal=true;
     },
     closeModal(){
        this.showModal=false;
     },
     fetchOrders(page=1){
        axios.get('api/orders?page='+page)
          .then(response =>{
            this.orders = response;
          })
      .catch(error =>{
        console.log(error);
      });
  }
},
mounted(){
  this.fetchOrders();
}
});

在这里，我希望openModal(id)方法console.log(this.modalType)能够执行，因为下面的行会立即this.showModal=true被执行。

但我的期望不起作用。console.log 行不被执行。

我的代码出了什么问题？

您可以在此链接上查看实时代码这里

希望这能证明这是一个正常运行的错误或幕后发生的一些怪异事件。

4

0 回答 0