Question

我是vue.js的新手，我有一点挑战。我创建了一个文件ChatMessage.vue，这是文件的内容。

<template>
<div>
     <p>{{message}}</p>
    <small>view author here</small>
</div>
</template>

<script>
export default {
    name: 'chat-message',
    data () {
        return {
            message: 'message',
            user: "John Ham"
        }
    }
}
</script>

<script lang="css">
</script>

我尝试运行时收到此错误消息。

[Vue warn]: Property or method "message" is not defined on the 
instance but referenced during render. Make sure to declare reactive 
data properties in the data option.

found in

---> <ChatMessage> at 
/var/www/html/..../resources/assets/js/components/ChatMessage.vue
   <Root>

我的laravel刀片模板中有这个

<!DOCTYPE html>
<html>
<head>
    <title>Chatroom</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="css/app.css">
</head>
<body>
<div id="app">
    <h1>Chatroom</h1>
    <chat-message></chat-message>

</div>
<script src="js/app.js" charset="utf-8"></script>
<script>
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-
token"]').attr('content')
        }
    });
</script>
</body>
</html>

在我的app.js中，我有这个

require('./bootstrap');

window.Vue = require('vue');

Vue.component('chat-message', 
require('./components/ChatMessage.vue'));

const app = new Vue({
  el: '#app'
});

Answer 1

我发现了问题。由于某种原因它与语法相关，我必须包括

<script lang="css"></script>

前

<script>
export default {
 name: 'chat-message',
 data () {
    return {
        message: 'message',
        user: "John Ham"
     }
 }
}
</script>

vue.js无法查看我的变量

1 个答案: