[Vue 警告]：属性或方法“permissionsSelected”未在实例上定义，但在渲染期间引用答案

【问题标题】：[Vue warn]: Property or method "permissionsSelected" is not defined on the instance but referenced during render[Vue 警告]：属性或方法“permissionsSelected”未在实例上定义，但在渲染期间引用
【发布时间】：2018-09-24 19:51:10
【问题描述】：

我正在尝试自动检查活动权限，但 vue 不起作用。有人可以解释什么问题吗？因为我对这些东西没有经验。

控制台输出：

[Vue 警告]：属性或方法“permissionsSelected”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件。请参阅：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

【问题讨论】：

标签： laravel vue.js

【解决方案1】：

您似乎正在#app 上初始化 Vue，但没有具有该 ID 的元素。

尝试在表单中添加 id：

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

编辑：如果你想扩展一个已经初始化的 Vue 实例，使用Vue.extend

EDIT2：在使用 laravel 和刀片模板时，为了避免此类问题，我会改用 .vue file 和 prop 来获取组件内部的数据，并对其中的数据执行任何操作。这样就避免了 Vue 的多次实例化，并且代码更细粒度和结构更好。

【讨论】：

模板上有一个全局 ID，此部分正在扩展
那么我认为您缺少模板部分。如错误消息中所示，如果您转到文档，则有 data: { // declare message with an empty value message: '' }, template: '<div>{{ message }}</div>'
另外，脚本不会在模板上方读取。要么使用Vue.extend，要么在这个刀片模板中添加一个id为app的元素。
我尝试在表单上添加 id = 无效。第一条评论不太明白，但是我尝试使用模板，不知道我是否做得对但仍然没有效果。
checkout tihs fiddle 以获得原始实现。添加id="app" 有效

【解决方案2】：

如果你在 app.js 或任何共享的 js 文件中有 vue 实例，请删除它@Leonardo H

【讨论】：

cmets 中的一个人@Pierre.Vriens