0

I'm just doing following the Vuetable tutorial to use it in my own app, but my browser shows a blank page. Vue dev tools always says "Vue.js is not detected"; I feel like I'm missing something simple. I've followed the tutorial verbatim, and works in JSFiddle. Does anyone see the problem?

Main.js:

Vue.use(Vuetable);
Vue.config.devtools = true;

var app = new Vue({
    el: '#app',
    components:{
        'vuetable-pagination': Vuetable.VuetablePagination
       },
    data: {
        fields: ['name', 'email','birthdate','nickname','gender','__slot:actions'] },

    computed: {},
    methods: {
        onPaginationData (paginationData) {
          this.$refs.pagination.setPaginationData(paginationData)
        },
        onChangePage (page) {
          this.$refs.vuetable.changePage(page)
        },
        editRow(rowData){
          alert("You clicked edit on"+ JSON.stringify(rowData))
        },
        deleteRow(rowData){
          alert("You clicked delete on"+ JSON.stringify(rowData))
        }
      },
})

HTML File:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Test environment</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- Use Vue framework -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>

<body>

    <!-- Supporting javascript -->
    <script src="https://unpkg.com/smiles-drawer@1.0.2/dist/smiles-drawer.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js"></script>
    <!-- vuetable-2 dependencies -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.1/axios.min.js"></script>
    <!-- vuetable-2 -->
    <script src="https://rawgit.com/ratiw/vuetable-2/develop/dist/vuetable-2.js"></script>
    <script src="main.js"></script>
    <div id="app">
        <div class="ui container">
            <vuetable ref="vuetable" api-url="https://vuetable.ratiw.net/api/users" :fields="fields" pagination-path="" @vuetable:pagination-data="onPaginationData"
                      data-path="">
                <template slot="actions" scope="props">
                    <div class="table-button-container">
                        <button class="ui button" @click="editRow(props.rowData)">
                            <i class="fa fa-edit"></i> Edit
                        </button>&nbsp;&nbsp;
                        <button class="ui basic red button" @click="deleteRow(props.rowData)">
                            <i class="fa fa-remove"></i> Delete
                        </button>&nbsp;&nbsp;
                    </div>
                </template>
            </vuetable>
            <vuetable-pagination ref="pagination" @vuetable-pagination:change-page="onChangePage"></vuetable-pagination>
        </div>
    </div>
</body>
</html>
maw295
  • 1
  • Move all those script tags to the bottom of the page. Your Vue is getting created *before* the html is rendered. Also you are including the Vue twice; once in the header and once in the body. – Bert Jun 07 '18 at 23:20
  • You got it. Knew it was something simple. Thanks. – maw295 Jun 07 '18 at 23:32

0 Answers0