问题描述
我正在用 vue.js 和 laravel 做一个小项目。我有一个产品列表,当我点击“快速查看”按钮上的特定产品时,我想在模式中显示有关该产品的所有数据,但数据未显示在模式中。
你能帮我吗?这是我的代码:
@extends('app')
@section('content')
<div id ="crud" class="row">
<div class="col-xs-12">
<h1 class="page-header">Lista de Articulo</h1>
</div>
<div class="wrap-icon right-section col-md-12" data-toggle="modal" data-target="#list" >
<div class="wrap-icon-section wishlist">
<a href="#" class="link-direction">
<i class="fa fa-heart" aria-hidden="true"></i>
<div class="left-info">
<span class="index">0 item</span>
<br>
<span class="title">Wishlist</span>
</div>
</a>
</div>
</div>
<div class="row">
<div v-for="keep in keeps" class="col-md-4" style="width:25%;" @mouSEOver="showByIndex = keep" @mouSEOut="showByIndex = null">
<div class="container">
<img :src="keep.foto" style="width:100%; max-width:150px;">
<button class="btn" v-show="showByIndex === keep" v-on:click.prevent="showKeep(keep)">Quick view</button>
</div>
<h3>
<b> @{{keep.nombre}}</b>
</h3>
<p> @{{keep.descripcion}}</p>
解决方法
在blade结构中你不能直接从vue发送数据,你需要为此编写一个组件。
https://v3.vuejs.org/examples/modal.html#modal-component
,我修好了。错误是因为我在 div 之外调用了模态文件。谢谢大家。