Question

我尝试自动检查有效权限，但vue不起作用。有人能解释一下这个问题是什么吗？因为我对这些东西没有经验。

控制台输出：

[Vue警告]：财产或方法＆＃34; permissionsSelected＆＃34;未在实例上定义，但在呈现期间引用。通过初始化属性，确保此属性在数据选项或基于类的组件中是被动的。请参阅：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

Answer 1

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

尝试在表单中添加ID：

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

编辑：如果要扩展已初始化的Vue实例，请使用Vue.extend

EDIT2：当使用laravel和blade模板时，为了避免这些问题，我会使用带有.vue file的prop来获取组件内部的数据并使用里面的数据执行任何操作它。通过这种方式，避免了Vue的多个实例化，并且代码更精细且结构更好。

Answer 2

如果您在app.js或任何共享的js文件中都有一个vue实例，请将其删除@Leonardo H

[Vue警告]：财产或方法＆＃34; permissionsSelected＆＃34;未在实例上定义，但在呈现期间引用

2 个答案: