Invalid prop: type check failed for prop "fields". Expected Array, got Undefined.

[roulendz]

Hello, awesome people,

@extends('layouts.app_backend')
@section('Specific-Page-Vendor-CSS')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
@stop

@section('content')
<div class="container">
    <div class="row">
       <example></example>
       <div class="col-md-8 col-md-offset-2">
        <div class="panel panel-default">
            <passport-clients></passport-clients>
            <passport-authorized-clients></passport-authorized-clients>
            <passport-personal-access-tokens></passport-personal-access-tokens>
            <div id="app" class="ui vertical stripe segment">
                <div class="ui container">
                    <div id="content" class="ui basic segment">
                        <h3 class="ui header">List of Users</h3>
                        <vuetable
                        api-url="http://gomodel.dev/api/users"
                        table-wrapper="#content"
                        :fields="columns"
                        :item-actions="itemActions"
                        ></vuetable>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
@endsection

@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            columns: [
            'name',
            'nickname',
            'email',
            'birthdate',
            'gender',
            '__actions'
            ],
            itemActions: [
            { name: 'view-item', label: '', icon: 'zoom icon', class: 'ui teal button' },
            { name: 'edit-item', label: '', icon: 'edit icon', class: 'ui orange button'},
            { name: 'delete-item', label: '', icon: 'delete icon', class: 'ui red button' }
            ]
        },
        methods: {
            viewProfile: function(id) {
                console.log('view profile with id:', id)
            }
        },
        events: {
            'vuetable:action': function(action, data) {
                console.log('vuetable:action', action, data)
                if (action == 'view-item') {
                    this.viewProfile(data.id)
                }
            },
            'vuetable:load-error': function(response) {
                console.log('Load Error: ', response)
            }
        }
    })
</script>
@endsection

Can not figure out where is my erro.

vue.common.js?4a36:1019[Vue warn]: Invalid prop: type check failed for prop "fields". Expected Array, got Undefined. (found in component: <vuetable>)warn @ vue.common.js?4a36:1019assertProp @ ?d41d:6267processPropValue @ ?d41d:6172initProp @ ?d41d:6193bind @ ?d41d:6386Directive._bind @ ?d41d:8325linkAndCapture @ ?d41d:6928compileAndLinkProps @ ?d41d:7003Vue._initProps @ ?d41d:7882Vue._initState @ ?d41d:7860Vue._init @ ?d41d:2458Vuetable @ VM5289:2build @ ?d41d:5837mountComponent @ ?d41d:5754(anonymous function) @ ?d41d:5716(anonymous function) @ ?d41d:5734cb @ vue.common.js?4a36:367Vue._resolveComponent @ ?d41d:8869resolveComponent @ ?d41d:5736setComponent @ ?d41d:5715bind @ ?d41d:5675Directive._bind @ ?d41d:8325linkAndCapture @ ?d41d:6928compositeLinkFn @ ?d41d:6897Vue._compile @ ?d41d:8611Vue.$mount @ ?d41d:9446Vue._init @ ?d41d:2468Vue @ ?d41d:9510(anonymous function) @ app.js?8b67:53(anonymous function) @ app.js:728__webpack_require__ @ app.js:20(anonymous function) @ app.js:64(anonymous function) @ app.js:67
Vuetable.vue?1453:344Uncaught TypeError: Cannot read property 'forEach' of undefined

Any hep would be appreciated

[ratiw]

@roulendz Which version of Vue.js you're using? Which browser?

Can you please check the generated HTML code and see if there is anything wrong with it?

[roulendz]

Google chrome vue:1.0.26 This is generated:

<div id="app" class="ui vertical stripe segment">
         <div class="ui container">
                    <div id="content" class="ui basic segment">
                        <h3 class="ui header">List of Users</h3>

                    </div>
         </div>
</div>

This is in my view

            <div id="app" class="ui vertical stripe segment">
                <div class="ui container">
                    <div id="content" class="ui basic segment">
                        <h3 class="ui header">List of Users</h3>
                        <vuetable
                        api-url="/api/users"
                        table-wrapper="#content"
                        :fields="columns"
                        :item-actions="itemActions"
                        ></vuetable>
                    </div>
                </div>
            </div>

This is my pacekage.json

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "bootstrap-sass": "^3.3.7",
    "gulp": "^3.9.1",
    "jquery": "^3.1.0",
    "laravel-elixir": "^6.0.0-9",
    "laravel-elixir-vue": "^0.1.4",
    "laravel-elixir-vueify": "^2.0.0",
    "laravel-elixir-webpack-official": "^1.0.2",
    "lodash": "^4.14.0",
    "vue": "^1.0.26",
    "vue-resource": "^0.9.3",
    "vuetable": "^1.4.1"
  },
  "dependencies": {
    "bootstrap-sass": "^3.3.7",
    "font-awesome": "^4.6.3",
    "isotope-layout": "^3.0.1",
    "jquery-lazyload": "^1.9.7",
    "jquery-validation": "git+https://github.com/jzaefferer/jquery-validation.git",
    "jquery.appear": "^1.0.1",
    "jquery.cookie": "^1.4.1",
    "jquery.easing": "^1.4.1",
    "magnific-popup": "^1.1.0",
    "modernizr": "^3.3.1",
    "owl.carousel": "^2.1.4",
    "simple-line-icons": "^2.3.2",
    "turbolinks": "^5.0.0",
    "vide": "git+https://github.com/VodkaBears/Vide.git"
  }
}

this is gulp

var elixir = require('laravel-elixir');

require('laravel-elixir-vue');
require('laravel-elixir-copy-fonts');

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for our application, as well as publishing vendor resources.
 |
 */

elixir(function(mix) {
    mix.sass(['backend/app.scss'], 'public/backend/css')
       .webpack('app.js', 'public/backend/js');
     mix.sass('frontend/app.scss', 'public/frontend/css')
});

[ratiw]

@roulendz No javascript was generated for this page? Does the scripts section exists or spells correctly in your laravel blade layout?

[anshu2212]

I am experiencing the same issue with Laravel 5.3 , vuetable 1.5.1 , npm 3.5.2 , node v4.2.6 , vue 1.0.26 vue-resource 0.9.3 , OS ubuntu 16.04 ,

[anshu2212]

when i dig it further i got that laravel creates an instance of Vue in app.js on body tags

const app = new Vue({ el: 'body' });

that makes inline instance (like in the docs) an nersted instance (on #app) , and the columns and itemAction data is searched in the laravel default instance in app.js . since both are not defined there, is not not present and it returns undefined and throws the error mentioned by @roulendz

if fields and item-actions are passed inline it starts working but makes the template too dirty

[ratiw]

@anshu2212 Interesting! I would love to know how you would solve this.

[ratiw]

My guess is that you could remove those lines from the app.js, but I don't know if it would affect other things. However, in Vue 2.0, it is adviced not to bind the app to the HTML body, otherwise, you'll get a warning message for doing so.

[anshu2212]

i tried to remove those lines but that only rendered vuetable compnents . other components are not rendered . so i will see other options.

[ratiw]

@anshu2212 How about changing to

  const app = new Vue({ el: '#app' });

and modify your master layout to include <div id="app">...</div>

[anshu2212]

hi @ratiw i finally managed to solve the problem

1. I first deleted the line const app = new Vue({ el: 'body' }); from my app.js file

2. Then in app.blade.php done something like this

   <script >
      var vm = new Vue({
          el:'body',
          @yield('vuedata')
      });
   </script>

3. And in blade view file

   @section('vuedata')
      data:{
          columns:[
              'name',
              'email',
              'address',
          ],
      },
      methods:{
          },

That solved my problem now all my custom components are rendring successfully and also i can bind data .

Problem was that vue instance on a scope already in other scope of other Vue instance cannot be accesed. and thats why its not a good idea to bind to HTML body.

more over it would be good if table would be drawn not on the exact data recived from the api but after proccesing it with over-writable function so that we can have computed columns.