v-dialogs icon indicating copy to clipboard operation
v-dialogs copied to clipboard

mixin error

Open RezaErfani67 opened this issue 2 years ago • 5 comments

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

RezaErfani67 avatar Jun 25 '22 09:06 RezaErfani67

Is it okay in the old version?

TerryZ avatar Jun 25 '22 09:06 TerryZ

Yes It works good on 2.1.4

RezaErfani67 avatar Jun 26 '22 03:06 RezaErfani67

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

TerryZ avatar Jun 26 '22 07:06 TerryZ

its my function in global mixins:

Vue.mixin({  ... }))
 i18nMixin:function(key){return i18n.t(key)},

RezaErfani67 avatar Jun 26 '22 09:06 RezaErfani67

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.

TerryZ avatar Jun 26 '22 11:06 TerryZ