Vue Js 组件不会在 Blade 视图 Laravel 中显示

Question

我的刀片视图'chat.blade.php'

    @extends('layouts.app')

@section('content')

<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading"</div>

                <div class="panel-body">Chats
                    <chat-messages :messages="messages"></chat-messages>
                </div>
                <div class="panel-footer">
                    <chat-form
                        v-on:messagesent="addMessage"
                        :user="{{ Auth::user() }}"
                    ></chat-form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

此代码是从 app.blade.php 扩展而来的，这可能不是问题的主要焦点

这是我的 Vue JS 中的我的 2 组件 'ChatMessages.vue'

<template>
<ul class="chat">
    <li class="left clearfix" v-for="message in messages">
        <div class="chat-body clearfix">
            <div class="header">
                <strong class="primary-font">
                    {{ message.user.name }}
                </strong>
            </div>
            <p>
                {{ message.message }}
            </p>
        </div>
    </li>
</ul>
  </template>

  <script>
  export default {
     props: ['messages']
  };
  </script>

这里是“ChatForm.vue”

<template>
<div class="input-group">
    <input id="btn-input" type="text" name="message" class="form-control input-sm" placeholder="Type your message here..." v-model="newMessage" @keyup.enter="sendMessage">
    
    <span class="input-group-btn">
        <button class="btn btn-primary btn-sm" id="btn-chat" @click="sendMessage">
            Send
        </button>
    </span>
</div>
  </template>

   <script>
     export default {
     props: ['user'],

     data() {
        return {
            newMessage: ''
        }
    },

    methods: {
        sendMessage() {
            this.$emit('messagesent', {
                user: this.user,
                message: this.newMessage
            });

            this.newMessage = ''
        }
    }    
}
       </script>

这是问题的以下屏幕截图 Click here for the Picture

正如您在屏幕截图中看到的，下面列出的 vue.js 中的聊天组件不会显示，它只是显示为空白，仅显示滚动条、导航栏和“聊天”文本。来自 app.blade.php] 请帮我 ：）。谢谢

Answer 1

您没有向您的组件提交任何消息。 :messages="messages" 是 Vue 语法。

假设您的控制器将$messages 分配给您的视图：

<chat-messages messages="{{ json_encode($messages) }}"></chat-messages>

应该这样做。需要使用刀片变量来赋值