[Vue warn]: Missing required prop: resource (found in component: <v-paginator>)

[solidevolution]

Got this error while getting data with vuejs-cli build project from lumen(laravel) api.

package.json

  "dependencies": {
    "babel-runtime": "^6.0.0",
    "font-awesome": "^4.6.3",
    "font-awesome-webpack": "0.0.4",
    "foundation-sites": "^6.2.3",
    "jquery": "^3.1.0",
    "local-storage": "^1.4.2",
    "vue": "^1.0.21",
    "vue-resource": "^0.9.3",
    "vue-router": "^0.7.13",
    "vuejs-paginator": "^1.0.15",
    "vuex": "^1.0.0-rc.2",
    "what-input": "^3.0.0"
  },

main.js

import 'foundation-sites/dist/foundation-flex.css'

// load jquery and foundation in the window scope
import $ from 'jquery'
import 'font-awesome-webpack'

import { foundation } from 'foundation-sites/js/foundation.core'
import 'foundation-sites/js/foundation.util.mediaQuery'

import 'what-input/dist/what-input'
import 'foundation-sites/js/foundation.util.nest'
import 'foundation-sites/js/foundation.util.box'
import 'foundation-sites/js/foundation.util.keyboard'
import 'foundation-sites/js/foundation.util.motion'
import 'foundation-sites/js/foundation.util.timerandimageloader'
import 'foundation-sites/js/foundation.util.touch'
import 'foundation-sites/js/foundation.util.triggers'
import 'foundation-sites/js/foundation.offcanvas'
import 'foundation-sites/js/foundation.dropdownMenu'
import 'foundation-sites/js/foundation.dropdown'
import 'foundation-sites/js/foundation.equalizer'

import Vue from 'vue'
import App from './App'

import VueRouter from 'vue-router'
import VueResource from 'vue-resource'

$.fn.foundation = foundation

var Dashboard = Vue.extend({
  template: '<h1>Übersicht</h1>'
})

var Checkin = Vue.extend({
  template: '<h1>Bestellen</h1>'
})

var Checkout = Vue.extend({
  template: '<h1>Abholen</h1>'
})

Vue.use(VueResource)
Vue.use(VueRouter)

var router = new VueRouter({
  hashbang: false,
  history: true,
  root: '/'
})

router.map({
  '': {
    component: Dashboard
  },
  'checkin': {
    component: Checkin
  },
  'checkout': {
    component: Checkout
  }
})

router.redirect({
  '*': '/'
})

router.start(App, 'app')

/* eslint-disable no-new */
new Vue({
  el: 'body',
  components: { App },
  ready: function () {
    $(document).ready(function () {
      console.log('jquery is ready!')
      $(document).foundation()
    })
  }
})

App.vue (HTML)

<template>
        <v-paginator :options="options" :resource_url="resource_url" @update="updateUsers"></v-paginator>

        <ul>
          <li v-for="user in users">
            {{ user }}
          </li>
        </ul>
</template>

App.vue (JS)

<script>
import Store from './vuex/store'
import VuePaginator from 'vuejs-paginator'

export default {
  components: {
    VPaginator: VuePaginator
  },
  ready: function () {
    Store.dispatch('APP_INIT')
  },
  data: function () {
    return {
      users: [],
      resource_url: '/api/v1/users',
      options: {
        remote_data: 'data',
        remote_current_page: 'current_page',
        remote_last_page: 'last_page',
        remote_next_page_url: 'next_page_url',
        remote_prev_page_url: 'prev_page_url',
        next_button_text: 'Go Next',
        previous_button_text: 'Go Back'
      }
    }
  },
  methods: {
    updateUsers (data) {
      this.users = data
    }
  }
}
</script>

Any idea? Tried to play with :options, :resource_url, :resource.sync, @update etc but not success.

[hootlex]

In Version 1 there is no @update.
You have to call <v-paginator> including the resource property.

For example:

<v-paginator :resource.sync="animals" resource_url="api/animals"></v-paginator>

[solidevolution]

That works, thanks!

Do you have a "best practice" solution proxyTable with webpack?

I want my API on another server, in dev my application is on port 8080 and my api on 8000

Is there a build in way to manipulate the next/previous links for that:

XMLHttpRequest cannot load http://localhost:8000/api/v1/users?page=2. Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin.