Laravel 如何将数据传递到Vuejs中的模态组件。我的问题是它根本不会出现在浏览器上

这是模态

<template>
    <div>
         <transition name="modal" id="modal-template">
             <div class="modal-mask" >
                 <div class="modal-wrapper">
                     <div class="modal-container" >
                         <div class="modal-header">
                             <slot name="header">
                             </slot>
                         </div>
                         <div class="modal-body" >
                             <slot name="body">
                                 <h4 style="font-size:18px" class="order-title">
                                     <!-- Productname  -->
                                     <h4 >{{items.name}}</h4>/<!-- this is not showing -->
                                 </h4> 
                              </slot>               
                          </div>
                      </div>
                  </div>
              </div>
          </transition>
      </div>               
</template>

{{items.name}/

父视图

<template>
    <div  class="card">
        <div  v-bind:key="item.item_id" v-for="item in items" class="card-body">
        <!--here i add the v-for to loop through the data but its undefined or empty -->
            <div class="row product-order">
                <div class="col-sm-12 col-lg-12">
                    <h4 >{{ item.name }}</h4>
                    <div class="row">
                        <div class="image-container">
                            <div class="col-2 product-info-product-image">
                                 <div v-bind:key="items.item_id" v-for="items in item_id">
                                     <OrderdetailModal
                            v-if="showModal" @close="showModal = false"/>
                            </div>
                            <img
                                @click="goToProductinfo(item.item_id)"
                                class="center product-info-product-image"
                                :src="item.product_image"
                             />
                        </div>
                    </div>
                </div>
            </div>
        </div>
</template>
    
<script>
import axios from 'axios';
import OrderdetailModal from '../components/Orderdetail';
//beginning of data an methods calls

export default 
{
    name:"Product",
    components:{
        OrderdetailModal
    },
    data () {//here is the data of the parent view
        return {
            item_id:[],
            showModal: false
        }
    },
    methods:{
        goToProductinfo(item_id)
        {  //here is the function that fetch the data.
            this.getProductinfo(item_id);//fetches data and set item_id to response
             this.showModal = true;//sets modal to true
         }
         //end of all methods
         //these function should work perfectly 
     }
}
               //end of export default
</script>
//end of code

{{item.name}
从“axios”导入axios；
从“../components/Orderdetail”导入OrderdetailModal；
//方法调用的数据的开始
导出默认值
{
名称：“产品”，
组成部分：{
OrderdetailModal
},
data（）{//这是父视图的数据
返回{
项目编号：[]，
showModal:错误
}
},
方法：{
goToProductinfo（项目id）
{//这里是获取数据的函数。
this.getProductinfo（item_id）；//获取数据并将item_id设置为响应
this.showmodel=true；//将model设置为true
}
//所有方法结束
//这些功能应该可以完美地工作
}
}
//导出默认结束
//代码结束

在您的父vue组件中是否有一个

div

未关闭？请正确地重新格式化您的代码，并查找您的任何代码输入错误。我只是这样做了，但我知道这不会解决问题。是否将您的父vue组件命名为

div

未关闭？请正确地重新格式化您的代码，并查找您所犯的任何代码错误。我只是这样做了，但我知道这不会解决问题