Question

方案

我有一个通用的模态组件，我使用全局总线（空的VUE实例），与使用它的任何其他组件的模态组件进行通信。

问题

在Modal.VUE组件的Mounted（）或Created（）挂钩中，我试图覆盖默认的初始化值，我需要弄清楚要在模态中显示哪些内容。

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>

.. modalComponent值始终为空（初始化）

脚本代码：

<script>

import bus from '../global/bus.js'

export default {
    name: "modal",
    data(){
        return {
            modalComponent: "empty"
        }
    },
    mounted() {
        bus.$on('on-action', function (actionName) {
            console.log("Selected action is : " + actionName)
            this.modalComponent == actionName
        })
    }
}

那我在这里做错了什么？这是我初始化的方式吗？ mount（）或created（）钩子有问题吗？或者..我设置新值的方式？

更新： 当console.log（this）：

Answer 1

除了使用等于运算符而不是赋值运算符之外，this不是Vue。尝试

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

或

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

或

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

请参阅How to access the correct this inside a callback?

Answer 2

好吧......我想出了一个更好的方法来处理这个问题，使用状态..

来源页面（使用方法）：

<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>

源页面（显示模态组件的Vue代码）：

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

Store.JS代码：

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}
    }

<强> Mutationtypes.JS

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>

这样......你不需要打扰一个新的VUE实例（总线），以及使用emit和on的问题（由于首次点击不工作的问题，它也不会表现为100％）。

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

2 个答案: