首页 > 解决方案 > 如何在刀片中显示 vue.js 数据

问题描述

我正在用 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>

标签: laravelvue.jslaravel-blade

解决方案


您不能直接从刀片结构中的 vue 发送数据,您需要为此编写一个组件。

https://v3.vuejs.org/examples/modal.html#modal-component


推荐阅读