在下拉事件中重新加载分层数据

时间:2019-07-17 09:48:30

标签: vue.js

今天,外面不仅是灰色,而且在我脑海中也很暗。 rr ... 我只需要一个小提示,因为它对我来说是如此简单:如何在下拉菜单更改时刷新表数据? 如下面的代码所示,数据来自vuex,API运行正常。

template>
<div>
    <div>
        <dropdown2 id="ddlSch" :options="sch" :placeholder="placeholderValue" v-model="selectedSch" @change="schChanged"></dropdown2>
    </div>
    <h4>Details</h4>
    <table>
        <thead>
            <tr class="text-center">
                <th v-for="column in columns">
                    {{column}}
                </th>
            </tr>
        </thead>
        <tbody>
            <tr scope="row" v-for="(item, index) in rows" :key="index">
                <td class="text-center">
                    {{item.posid}}
                </td>
                <td class="text-xs-left">
                    {{item.day}}
                </td>
                <td class="text-center">
                    {{item.tag}}
                </td>
            </tr>
        </tbody>
    </table>
  </div>

脚本:

<script>
import Dropdown2 from '../addons/Dropdown2';
export default {
    components: {
        Dropdown2
    },
    data() {
        return {
            placeholderValue: 'Sch',
            selectedSch: null,
            columns: ['ID', 'Date', 'Tag']    
        }
    },
    created() {
        this.$store.dispatch('basic/loadItems');
    },
    computed: {
        //load data for dropdown
        sch() {
            return this.$store.getters['basic/GetItems'];
        },
        rows() {
           // row data for table 
           return this.$store.getters['basic/GetItem'];
        }
    }
    watch: {
        selectedSch(newValue, oldValue) {
            this.$store.dispatch('basic/loadItem', newValue);
        }
    }
}

数据(JSON):

{"id":1,"name":"2019-2","positions":[
{"posid":1,"day":"01.02.2019 00:00:00","tag":null},
{"posid":2,"dayDte":"26.02.2019 00:00:00","tag":null}
]}

非常感谢! N

0 个答案:

没有答案