TerryZ / v-dialogs

A simple style useful dialog component collection for Vue
https://terryz.github.io/docs-vue3/dialog/
MIT License
130 stars 27 forks source link

mixin error #44

Open RezaErfani67 opened 2 years ago

RezaErfani67 commented 2 years ago

v2.2.0 not detect mixin function cal modal:

 openAddRecModal() {
            let that = this;
            that.$dlg.modal(addRecMail, {
                width: 1600,
                height: 600,
                title: "ثبت ",
                params: {
                    page: that.page,
                    keyword: that.keyword,
                    view: that.view,
                    limit: that.limit
                }
            });
        },

inside modal i have this button:

 <input type="button" :value="i18nMixin('shared.btnSubmit')" :class="btnSubmit" @click="submitReceive" />

image image

TerryZ commented 2 years ago

Is it okay in the old version?

RezaErfani67 commented 2 years ago

Yes It works good on 2.1.4

TerryZ commented 2 years ago

I tried some mixins case and use v2.2.0 of v-diaogs, it's work fine, can you post more content to help find issues.

mixins.js file

export default {
  methods: {
    upperCase (text) {
      if (!text) return ''
      return text.toUpperCase()
    }
  }
}

Profile.vue to display in Modal

<template>
  <div>
    <!-- result: `THIS IS TEXT` -->
    <span v-text="upperCasedText()" />
  </div>
</template>

<script>
import mixins from './mixins'
export default {
  mixins: [mixins],
  methods: {
    upperCasedText () {
      // call upperCase function from mixins.js 
      return this.upperCase('This is text.')
    }
  }
}
</script>

In page

import Profile from './Profile.vue'
export default {
  methods: {
    business () {
      this.$dlg.modal(Profile, {
        ...parameters
      })
    }
  }
}
RezaErfani67 commented 2 years ago

its my function in global mixins:

Vue.mixin({  ... }))
 i18nMixin:function(key){return i18n.t(key)},
TerryZ commented 2 years ago

I still using my example case and modified like below

main.js setup globally mixin

import mixins from './mixins'
Vue.mixin(mixins)

Profile.vue to display in Modal

<template>
  <div>
    <!-- result: `THIS IS TEXT` -->
    <span v-text="upperCasedText()" />
  </div>
</template>

<script>
export default {
  methods: {
    upperCasedText () {
      // call upperCase function from mixins.js 
      return this.upperCase('This is text.')
    }
  }
}
</script>

upperCase function call succeeded.