[Vue warn]: Property or method “permissionsSelected” is not defined on the instance but referenced during render

Question

I'm trying to auto check active permissions, but vue does not work. Can someone explain what's the problem ? because im not wery experienced with this stuff.

Console Output:

[Vue warn]: Property or method "permissionsSelected" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

@extends('template.default')

@section('content')
<form action="{{ route('roles.update', $role->id) }}" method="POST">
    {{ csrf_field() }}
    {{ method_field('PUT') }}
    <input type="hidden" :value="permissionsSelected" name="permissions">

    <h5>Permissions:</h5>
    @foreach ($permissions as $r)
        <el-checkbox v-model="permissionsSelected" :native-value="{{$r->id}}"> {{$r->display_name}} <em>({{$r->description}})</em></el-checkbox>
    @endforeach
</form>

@endsection

@section('scripts')
  <script>
  var app = new Vue({
    el: '#app',
    data: {
      permissionsSelected: {!! $role->permissions->pluck('id') !!}
    }
  });
  </script>
@endsection

Leonardo H Leonardo H · Accepted Answer · 2018-04-14T17:35:52

It seems like you are initializing the Vue on #app but there is no element with that id.

Try adding an id to form:

<form id="app" action="{{ route('roles.update', $role->id) }}" method="POST">

EDIT: if you want to extend an already initialized Vue instance, use Vue.extend

EDIT2: when using laravel and blade templating, to avoid these kind of issues, I would instead use a .vue file with a prop to get data inside the component and do what ever with that data inside it. In this way it is avoided multiple instantiations of Vue and the code is more granular and better structured.

[Vue warn]: Property or method “permissionsSelected” is not defined on the instance but referenced during render

2 Answers