मैं GodofBrowser से एक प्लगइन का उपयोग करने का प्रयास कर रहा हूं, जैसा कि कहा गया है, लेकिन मुझे एक त्रुटि मिल रही है

  this.$dialog.confirm('Please confirm to continue')
  Uncaught TypeError: Cannot read property 'confirm' of undefined

तो यह।$प्लगइन अपरिभाषित है .... क्यों ?

// I installed it via npm 
npm install vuejs-dialog

main.js

// I imported it
import Vue from "vue"
import VuejsDialog from "vuejs-dialog"

// and I told Vue to install it 
Vue.use(VuejsDialog)

फिर मैं इसे 'क्लिक' विधि पर अपने App.vue में उपयोग करने का प्रयास कर रहा हूं:

App.vue

    <template>
      <div id="app" class="container">
        <ul class="navigation">
          <li id="home"><router-link :to="{ name: 'Home' }" >Home</router-link></li>
          <li id="shoppinglists" v-if="!logged">
            <span @click.capture="clicked">
              <router-link :to="{ name: 'ShoppingLists' }" >Shopping Lists</router-link>
            </span>
          </li>
          <li v-else id="shoppinglists"><router-link :to="{ name: 'ShoppingLists', params: { id: currentUserId } }" >Shopping Lists</router-link></li>
        </ul>
        <router-view></router-view>
      </div>
    </template>

    <script>
    import store from '@/vuex/store'
    import { mapGetters } from 'vuex'

    export default {
      name: 'app',
      methods: {
        clicked: (event) => {
          event.preventDefault()
          console.log('clicked!'). // got it in console
          this.$dialog.confirm('Please confirm to continue') // !ERROR
          .then(function () {
            console.log('Clicked on proceed')
          })
          .catch(function () {
            console.log('Clicked on cancel')
          })
        }
      },
      computed: {
        ...mapGetters({ currentUserId: 'getCurrentUserId', logged: 'getLogged' })
      },
      store
    }
    </script>
1
user762579 24 अक्टूबर 2017, 16:04

2 जवाब

सबसे बढ़िया उत्तर

यह Vue अनुप्रयोगों के साथ एक आम ठोकर है - आप निम्न को आधिकारिक Vue दस्तावेज़ों में पा सकते हैं:

विकल्प प्रॉपर्टी या कॉलबैक पर तीर फ़ंक्शन का उपयोग न करें, जैसे कि बनाया गया: () => कंसोल.लॉग (यह.ए) या vm.$watch('a', newValue => this.myMethod())।

चूंकि तीर फ़ंक्शन मूल संदर्भ के लिए बाध्य हैं, यह Vue उदाहरण नहीं होगा जैसा कि आप अपेक्षा करते हैं, जिसके परिणामस्वरूप अक्सर त्रुटियाँ होती हैं जैसे कि Uncaught TypeError: अपरिभाषित या अनकॉटेड टाइप एरर की संपत्ति नहीं पढ़ सकता: this.myMethod एक फ़ंक्शन नहीं है।

इसके बजाय एक सामान्य फ़ंक्शन का उपयोग करने का प्रयास करें:

methods: {
    clicked: function (event) {
      event.preventDefault()
      console.log('clicked!'). // got it in console
      this.$dialog.confirm('Please confirm to continue') // !ERROR
      .then(function () {
        console.log('Clicked on proceed')
      })
      .catch(function () {
        console.log('Clicked on cancel')
      })
    }
  }
2
Bragolgirith 24 अक्टूबर 2017, 16:25

उपयोग करना चाहिए: Vue.prototype, यह नहीं!

Vue.prototype.$dialog.confirm('Please confirm to continue')
2
user762579user762579 24 अक्टूबर 2017, 16:12