更新和访问Vue组件之间的警报消息变量

Question

我正在使用 VueJS 和 Laravel 6.0。我想要实现的是创建全局变量

alertStatus

和

alertMsg

，以便每次进行AJAX调用时，都可以更新全局变量以向用户显示警报消息。

所以我决定在这种情况下使用原型变量。这个想法是，当

User.vue

中的AJAX调用成功/失败时，原型变量应该更新，并且

Alerts.vue

应该相应地显示它。

但是，当

User.vue

组件中的数据更改时，原型变量显示似乎不会更新。

我不确定我的方法是否正确，想从 stackoverflow 获得一些想法。

谢谢

main.js

Vue.prototype.$alertStatus = '';
Vue.prototype.$alertMsg = [];

Alerts.vue

<template>
    <div class="alert alert-light alert-elevate" role="alert">
        <div class="alert-icon">
           <i class="flaticon-warning kt-font-brand"></i>
        </div>
        <div class="alert-text">
            {{alertMsg}}
        </div>
    </div>               
</template>

用户.vue

<script>
    export default {
        mounted() {
            var datatable = this.init();
            datatable.on('kt-datatable--on-ajax-fail', function(event, data){
                this.$alertStatus = data.responseJSON.status;
                this.$alertMsg = data.responseJSON.msg;
            });
        },
     }
</script>

Answer 1

我会考虑使用事件处理程序而不是全局原型。

Event.js — 感谢 Jeffrey Way 的 https://laracasts.com/

class Event {
    constructor() {
        this.vue = new Vue();
    }

    fire(event, data = null) {
        this.vue.$emit(event, data);
    }

    listen(event, callback) {
        this.vue.$on(event, callback);
    }
}

export default Event;

我在下面概述了基本用法，另外我在警报中添加了

v-if

，以便在不使用时隐藏它。

app.js

import Event from './Event';
window.Event = new Event;

Alerts.vue

<template>
    <div v-if="show" class="alert alert-light alert-elevate" role="alert">
        <div class="alert-icon"><i class="flaticon-warning kt-font-brand"></i></div>
        <div class="alert-text">
            {{ alert.msg }}
        </div>
    </div>               
</template>

<script>
    export default {
        data() {
            return {
                alert: {},
                show: false,
            }
        },
        mounted() {
            // listen for a global event 
            Event.listen('show-alert',alert => {
                this.alert = alert;
                this.show = true;
            });
        },
     }
</script>

用户.vue

<script>
    export default {
        mounted() {
            var datatable = this.init();
            datatable.on('kt-datatable--on-ajax-fail', function(event, data){     
                // fire a global event          
                Event.fire('show-alert',{ 
                    status: data.responseJSON.status,
                    msg: data.responseJSON.msg,
                });
            });
        },
     }
</script>

Answer 2

我正在 VueJS 中试验 TableTanstack - 为了获得可点击的警报和给定列的悬停显示，我创建了一个组件来提供警报方法和定义道具的方法，以便我可以将信息注入组件。最终结果：

我想要显示编辑日期的列定义，并将鼠标悬停在其上，可单击信息显示更多内容：

   { accessorKey: 'Meta', 
     header: 'Edited',
     cell: ({ row }) => h(MetaButton, {
      displaydata: format(new Date(row.original.ModifiedOn), 'MMM d, yyyy'), 
      metadata: 
       ' Created:' + format(new Date(row.original.CreatedOn), 'MMM d, yyyy HH:mm:ss') + 
       ' By:' + row.original.CreatedBy +
       '\n Edited:' + format(new Date(row.original.ModifiedOn), 'MMM d, yyyy HH:mm:ss') + 
       ' By:' + row.original.ModifiedBy +
       '\nIn your timezone (UTC' + new Date().getTimezoneOffset()*-1/60 +' )'
      }), 
      enableSorting:false },

组件：

    <script setup>
    const showit = (msgg) => {
      console.log(msgg);
      alert(msgg);
    }
    
    const props = defineProps({
      displaydata: String,
      metadata: String,
    });
    </script>
    
    <template>
      <span :title="`${metadata}`" 
      class="text-indigo-600 hover:text-indigo-500" 
      v-on:click=showit(metadata);
      >
      {{ displaydata }}&nbsp;&#9432;
      </span>
    </template>

警报看起来像这样： [点击警报 - 向用户获取信息][1] [1]：https://i.stack.imgur.com/3z50J.png

悬停看起来像这样： [当用户将鼠标悬停在单元格上时][2] [2]：https://i.stack.imgur.com/sOfpy.png

感谢 drehimself github 示例存储库 (https://github.com/drehimself/tanstack-table-vue-example) - 我分叉了它并将其制作成带有上述 mod 的乐谱列表的示例 - 完整代码在这里：（https://github.com/gitberry/vue-tanstack-example）