Question

我试图结合vuejs提供的两个vuejs组件。但它没有奏效弹出菜单通过模态组件显示，但 网格（表）视图通过网格组件未显示在弹出菜单上 仅显示搜索输入字段..... ..... 如果有人做过这样的事情，请告诉我

链接到vuejs中的网格组件：Grid Component

链接到vuejs中的模态组件：Modal Component

模板

<script type="x/template" id="modal-template">
<div class="modal-mask" v-show="show" transition="modal">
    <div class="modal-container">

        <div class="modal-header">
            <h3>New Post</h3>
        </div>

        <div class="modal-body">
            <div id="demo">
                <form id="search">
                    Search <input name="query" v-model="searchQuery">
                </form>
                <demogrid
                        :data="gridData"
                        :columns="gridColumns"
                        :filter-key="searchQuery">
                </demogrid>
            </div>
        </div>

        <div class="modal-footer text-right">
            <button class="modal-default-button" @click="savePost()">
                Save
            </button>
        </div>
    </div>
</div>

<script type="text/x-template" id="grid-template">
<table>
    <thead>
    <tr>
        <th v-for="key in columns"
            @click="sortBy(key)"
            :class="{active: sortKey == key}">
            {{key | capitalize}}
      <span class="arrow"
            :class="sortOrders[key] > 0 ? 'asc' : 'dsc'">
      </span>
        </th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="
    entry in data
    | filterBy filterKey
    | orderBy sortKey sortOrders[sortKey]">
        <td v-for="key in columns">
            {{entry[key]}}
        </td>
    </tr>
    </tbody>
</table>

<!-- app -->
<div id="app">
<modal :show.sync="showModal"></modal>
<button id="show-modal" @click="showModal = true">New Post</button>
</div>




<script>
Vue.component('modal', {
    template: '#modal-template',
    props: ['show'],
    methods: {
        savePost: function () {
            // Insert AJAX call here...
            this.show = false;
        }
    }
});

new Vue({
    el: '#app',
    data: {
        showModal: false
    },
    components:{demogrid: {
            template: '#grid-template',
            props: {
                data: Array,
                columns: Array,
                filterKey: String
            },
            data: function () {
                var sortOrders = {}
                this.columns.forEach(function (key) {
                    sortOrders[key] = 1
                })
                return {
                    sortKey: '',
                    sortOrders: sortOrders
                }
            },
            methods: {
                sortBy: function (key) {
                    this.sortKey = key
                    this.sortOrders[key] = this.sortOrders[key] * -1
                }
            }
        }}
});;

Vue.component('demo-grid', {
    template: '#grid-template',
    props: {
        data: Array,
        columns: Array,
        filterKey: String
    },
    data: function () {
        var sortOrders = {}
        this.columns.forEach(function (key) {
            sortOrders[key] = 1
        })
        return {
            sortKey: '',
            sortOrders: sortOrders
        }
    },
    methods: {
        sortBy: function (key) {
            this.sortKey = key
            this.sortOrders[key] = this.sortOrders[key] * -1
        }
    }
})

// bootstrap the demo
var demo = new Vue({
    el: '#demo',
    data: {
        searchQuery: '',
        gridColumns: ['name', 'power'],
        gridData: [
            { name: 'Chuck Norris', power: Infinity },
            { name: 'Bruce Lee', power: 9000 },
            { name: 'Jackie Chan', power: 7000 },
            { name: 'Jet Li', power: 8000 }
        ]
    }
})
</script>

Answer 1

检查一下！

一个基于VUEJS的非常简单而强大的网格，该示例与ASP.NET MVC相结合

https://github.com/Dariush-Tasdighi/LEARNING_VUE

我们使用了Modal来加载...

如何在vuejs中组合网格和模态组件

1 个答案: