laravel - 信息未以模式显示，但没有错误，并且 Vue 组件在控制台中工作

Question

希望以模式显示数据。我的设置如下：

应用程序.js

Vue.component('modal', require('./components/Modal.vue'));

const app = new Vue({
    el: '#vue',
    data() {
        return {
            id: '',
            booking_start: '',
            booking_end: '',
            car: [],
            user: []
        };
    },
});

Modal.vue 组件：

<template>
    <div id="modal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <slot name="header"></slot>
                </div>
                <div class="modal-body">
                    <slot></slot>
                </div>
                <div class="modal-footer">
                    <slot name="footer"></slot>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</template>

<script>
    export default {
        name: 'modal',
        mounted() {
            console.log('Modal mounted.')
        },
        data() {
            return {}
        },
        props: ['id', 'booking_start', 'car', 'user'],
        mounted() {

        }
    }
</script>

Laravel 刀片：

<div id="vue">
        <modal v-bind="{{json_encode($reservation)}}">
            <template slot="header">
                <strong>Vehicle Checkout</strong>
            </template>
            <p>Ready to check out this vehicle?</p>
            <table class="table table-sm">
                <tr>
                    <th>Vehicle Name</th>
                    <td><span id="reservation-car-name">@{{ car.name }}</span></td>
                </tr>
                <tr>
                    <th>Vehicle Make / Model</th>
                    <td><span id="reservation-car-make-model"></span></td>
                </tr>
                <tr>
                    <th>Vehicle Registration</th>
                    <td><span id="reservation-car-registration"></span></td>
                </tr>
                <tr>
                    <th>Odometer Start</th>
                    <td><span id="reservation-car-odometer"></span></td>
                </tr>
            </table>
            <template slot="footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary">Checkout</button>
            </template>
        </modal>
    </div>

在这一点上，我只是试图让数据显示在模态中。

查看 Vue 开发工具：

控制台没有报错，可以在控制台输出我要的数据。

我可能缺少一些非常基本的东西，因为我是 Vue 的新手，但我一辈子都无法弄清楚它是什么。

Answer 1

组件标签被模板内容替换，因此将所有内容modal从组件标签放入组件中<modal>.your content.</modal>

Vue.component('modal',{
  props:['car'],
  template: `<div><template slot="header">
                <strong>Vehicle Checkout</strong>
            </template>
            <p>Ready to check out this vehicle?</p>
            <table class="table table-sm">
                <tr>
                    <th>Vehicle Name</th>
                    <td><span id="reservation-car-name">{{ car.name }}</span></td>
                </tr>
                <tr>
                    <th>Vehicle Make / Model</th>
                    <td><span id="reservation-car-make-model">{{ car.model }}</span></td>
                </tr>
                <tr>
                    <th>Vehicle Registration</th>
                    <td><span id="reservation-car-registration">{{ car.reg }}</span></td>
                </tr>
                <tr>
                    <th>Odometer Start</th>
                    <td><span id="reservation-car-odometer">{{ car.odo }}</span></td>
                </tr>
            </table>
            <template slot="footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary">Checkout</button>
            </template>
            </div>`
})


const app = new Vue({
    el: '#vue',
    data() {
        return {
            id: '',
            booking_start: '',
            booking_end: '',
            car: {name:'test1',model:'gh201',reg:'201821542',odo:'2018-01-01'},
            user: []
        };
    },
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="vue">
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
  <!-- Modal -->
  <div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
        <modal :car="car"></modal>
       </div>
    </div>
  </div>
</div>

我的其他答案与此问题有关：路由器视图和转换组