Javascript VUE.JS 2:无法覆盖挂载挂钩上的默认初始化数据（变量）

情景

我有一个通用的模态组件，其中我使用一个全局总线空VUE实例，与使用它的其他组件的模态组件通信

发行

在为Modal.VUE组件安装或创建的钩子中，我试图覆盖默认的初始化值，以确定在Modal.VUE组件中显示哪些内容

console.log("Selected action is : " + actionName)

。。。提示出正确的actionName，这样总线功能就存在了

但当设置如下变量时：

this.modalComponent == actionName

<h2 v-if="modalComponent == 'refund'">Refundér</h2>
<h2 v-if="modalComponent == 'empty'">Not defined</h2>

。。然后像这样使用它：

this.modalComponent == actionName

<h2 v-if="modalComponent == 'refund'">Refundér</h2>
<h2 v-if="modalComponent == 'empty'">Not defined</h2>

。。modalComponent值在初始化时始终为空

脚本代码：

那么我做错了什么？这是我初始化的方式吗？安装或创建的挂钩是否有问题？或我设置新值的方式

更新： 当console.logthis：

除了使用相等运算符而不是赋值运算符之外，这不是Vue。试一试

const self = this
bus.$on('on-action', function (actionName) {
    console.log("Selected action is : " + actionName)
    self.modalComponent = actionName
})

或

或

---

请参阅

好的。。。我想出了一个更好的方法来处理这个问题，使用state

源页面使用情况：

Store.JS代码：

Mutationtypes.JS

基于源页面上下文的模态组件切换内容

---

这样。。。您不必为新的VUE实例总线而烦恼，也不必为使用emit和时出现的问题而烦恼，因为第一次单击时出现不工作的问题。

尝试使用它。$set'modelComponent'，actionName；您可以控制台记录安装在内部总线中的“ths”的值吗$on@GONG：Gives me:Uncaught TypeError:无法在Vue$3处的字符串“modelComponent”上创建属性“return”。set[as$set]@user7814783:请参阅控制台打印屏幕的更新问题。logthis@TerjeNygård您正在总线中使用double==on，要赋值，应使用single=谢谢您的回答：。。它仍然显示modalComponent的默认值，就像在html中使用{{modalComponent}}一样。Console.Log显示所有正确的内容。。似乎UI没有使用最新值更新？值得一提的是，我第一次单击触发向总线发射的按钮时，总线“on-action”没有被触发。。aka no console.log结果@TerjeNygård你能提供一个示例来演示这个bug吗，或者让代码在github之类的东西上可用吗？我会让它可用的。。等一下：

bus.$on('on-action', actionName => this.modalComponent = actionName)

<a @click="toggleModal('refund')" class="btn btn-success btn-fixed-
  width">Refundér</a>
<a @click="toggleModal('move')" class="btn btn-success btn-fixed-
  width">Flytt</a>

toggleModal: function(actionName){
            this.$store.dispatch('switchModalComponent', {
                modalComponent: actionName
            })
            this.showModal = true;
        }

export default new Vuex.Store({ 
    state: {
        visibleModalComponent: "empty"
    },
    getters: {
        visibleModalComponent: state => state.visibleModalComponent
    },
    actions: {
      switchModalComponent({ commit }, modalComponent){
        commit(types.VISIBLE_MODAL_COMPONENT, modalComponent)
    },
     mutations: {
         [types.VISIBLE_MODAL_COMPONENT] (state, modalComponent) {state.visibleModalComponent = modalComponent}
    }

export const VISIBLE_MODAL_COMPONENT = "VISIBLE_MODAL_COMPONENT"

<h1>{{ visibleModalComponent.modalComponent }}</h1>

<script>
    import { mapGetters } from "vuex"

    export default {
        name: "modal",
        computed: {
            ...mapGetters(["visibleModalComponent"])
        }
    }
</script>