Question

我只是按照Vuetable教程在我自己的应用程序中使用它，但我的浏览器显示一个空白页面。 Vue dev工具总是说“未检测到Vue.js”;我觉得我错过了一些简单的事情。我按照教程逐字逐句，并在JSFiddle中工作。有谁看到这个问题？

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文件：

<!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>

Vuetable 2未在浏览器

0 个答案: