CODEWITHSUNDEEP
vue.jslaravel-5.4
llobet
llobet

Reputation: 2790

Laravel 5.4 Vue Declarative Rendering

In a laravel 5.4 environment I want to render the text "Example" in the .panel-heading of Example.vue. After doing npm run watch I get the following 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.'

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>

Upvotes: 1

Views: 442

Answers (1)

thanksd
thanksd

Reputation: 55674

Your Example.vue component doesn't have access to its parent's properties. You need to define message within the same scope of the component you are trying to use it in.

You can do this by adding message as a data property in your Example component:

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

Or you can pass it in as a prop:

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

In your case, you would pass a value for the message prop like this:

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

Here's the documentation on Vue Component props.

Upvotes: 2

Related Questions