Question

我使用Vuetify作为我的项目，我有一个可扩展的Datatable行，当它点击时，将根据行的ID从服务器端检索数据。但是，无法在框架中找到正确的方法，以便自己尝试。

所以这里我有我的数据表，并注意到我有一个名为getTransactionDetails（）的函数，我所做的是当用户点击该行时将触发此函数并传递transaction_id以在我的服务器端工作。

<v-data-table
    v-bind:headers="cashierheaders"
    v-bind:items="cashierItems"
    v-bind:search="search"
    v-bind:pagination.sync="pagination"
    :total-items="totalItems"
    :loading="loadDatatable"
    class="cashierDatatable"
    item-key="transaction_id"
    expand
>
    <template slot="items" slot-scope="props">
        <tr @click="props.expanded = !props.expanded"  style="cursor:pointer;">
            <td> 
                <v-flex>
          <v-chip label small color="green lighten-4" class="ml-0">
            {{ props.item.transaction_id}}
          </v-chip>
        </v-flex>
       </td>
            <td>
                {{props.item.pos_transaction_id}}
            </td>
            <td>{{props.item.transaction_status}}</td>
            <td>{{props.item.business_date}}</td>
            <td>{{props.item.sale}}</td>
            <td>{{props.item.coupon}}</td>
        </tr>
    </template>         
    <template slot="expand" slot-scope="props">                                 
        <v-card flat dark>
            <v-layout>
                <v-flex xs12 sm6 sm6>

                </v-flex>
                <v-flex xs12 sm6 sm6>
                    <v-card>
                        <v-card-title>
                            <v-chip label small color="red lighten-4">Giveaways</v-chip>
                            <v-chip label small color="red lighten-4">Modifed</v-chip>
                        </v-card-title>
                        <v-divider></v-divider>
                        <v-card-title>
                            <!-- start of transaction -->
                                <v-list two-lines subheader dark>
                                    <v-subheader style="">

                                    </v-subheader>

                                    <template v-for="(item,index) in getTransactionDetails(props.item.transaction_id)">
                                        {{ item }}

                                    </template>
                                </v-list>
                            <!-- end of transaction -->
                        </v-card-title>
                    </v-card>
                </v-flex>
            </v-layout>
        </v-card>
    </template>                 
</v-data-table>

这是我的方法，问题是return response.data在我打电话时没有将值返回给自己getTransactionDetails。有人帮我这个。但是，如果它只是像return [{value:'test'}]这样的正常返回，则将值传递给函数

getTransactionDetails:function($trans_id){
    const data = {
        oc_data : ['giveaways'],
        transaction_id: $trans_id.substr(1)
    }
    this.$store.dispatch('getObservedCat',data)
        .then(response=>{

            return response.data
        })
        .catch(error=>{
            console.log(error)
        })
}

这是我从vuex发送的调度行动

getObservedCat:({commit},obj)=>{
        return new Promise((resolve,reject)=>{
            axios({
                url:'/prod/api/observredCategories',
                method:'post',
                config:'JSON',
                data: obj
            })
            .then(response=>{
                if(response.status == 200){
                    resolve(response.data)
                }
            })
            .catch(error=>{
                if(error.response){
                    reject(error.response.data);    
                }
            })
        })
    }

Vue JS：Vuex中的调度操作不会返回值

0 个答案: