Question

在laravel 5.4环境中，我想在 Example.vue 的.panel-heading中呈现文本“Example”。完成npm run watch后，我得到以下Vue警告：

'属性或方法“消息”未在实例上定义，但在呈现期间引用。确保在数据选项中声明反应数据属性。'

app.js

require('./bootstrap');

window.Vue = require('vue');

Vue.component('example', require('./components/Example.vue'));

const app = new Vue({
    el: '#app',
    data: {
      message: 'Example'
    }
});

Example.vue

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

                    <div class="panel-body">
                        I'm an example component!
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

app.blade.php

<html>
<!-- ... -->
<body>
  <div id="app">
    <example></example>
  </div>
  <script src="{{ asset('js/app.js') }}"></script>
</body>

</html>

Answer 1

您的Example.vue组件无权访问其父级属性。您需要在尝试使用它的组件的同一范围内定义message。

您可以通过在示例组件中添加message作为数据属性来执行此操作：

// Example.vue script
export default {
  data() {
    return {
      message: 'Example',
    }
  },
}

或者你可以把它传递给道具：

// Example.vue script
export default {
  props: ['message'],
}

在您的情况下，您可以传递message道具的值，如下所示：

// in app.blade.php
<example message="Example"></example>

以下是Vue Component props的文档。

Laravel 5.4 Vue声明渲染

1 个答案: