How do you access a property from one component in Vue?

  • 0
    Vue 2.x, Webpack, application built on single file components. I can't figure out how Webpack puts it all together.

    The task is as follows. I wanted to make a wrapper ( load function) over the axios calls, for convenience. I wanted to put it in some my_lib.js so that I could access it from any component, but I couldn't find a way to do it.

    Then I decided to add this function as a method to the main App.vue file. When I write code for Selector.vue in the IDE (PyCharm), it finds links and highlights the tooltip, i.e. you can see that supposedly the load method from App.vue is available in Selector.vue .

    main.js
    ---------------
    import Vue from 'vue'
    import App from './App.vue'
    import store from './store'
    import vuetify from './plugins/vuetify'
    import axios from 'axios'
    
    Vue.config.productionTip = false
    Vue.prototype.axios = axios
    
    new Vue({
      store,
      vuetify,
      render: h => h(App)
    }).$mount('#app')


    App.vue
    ---------------
    <template>
    ...
    </template>
    
    <script>
    import Selector from '@/components/Selector.vue'
    
    export default {
      name: 'App',
      components: {
        Selector
      },
      methods: {
        load (command, { result, callback, data, method }) {
          this.axios({
            'site.com'
          }).then(response => {
            if (result) {
              result.data = response.data
              result.status = response.status
            }
          }).catch(error => {
            if (error.response) {
              if (result) {
                result.data = error.response.data
                result.status = error.response.status
              }
            } else if (error.request) {
              if (result) {
                result.error = error.message
              }
            }
          }).then(() => {
            if (callback) callback()
          })
        }
      }
    }
    </script>


    Selector.vue
    --------------
    <template>
      <div class="text-center">
        <v-menu offset-y>
          <template v-slot:activator="{ on }">
            <v-btn
              outlined
              x-small
              width="100%"
              v-on="on"
            >{{ $store.state.locale }}</v-btn>
          </template>
          <v-list>
            <v-list-item
              :value="$store.state.locale"
              v-for="(item,key) in messages"
              :key="key"
              @click="change_locale(key)"
            >
              <v-list-item-title>{{ item.title }}</v-list-item-title>
            </v-list-item>
          </v-list>
        </v-menu>
      </div>
    </template>
    
    <script>
    import { messages } from '@/assets/lang.js'
    
    export default {
      name: 'Selector',
      data: () => ({
        messages: messages
      }),
      methods: {
        change_locale (key) {
          const result = {}
          this.load(
            '/set_lang',
            {
              result,
              data: { lang: key },
              callback: () => {
                if (result.success) {
                  this.$store.dispatch('setLocale', key)
                }
              }
            }
          )
        }
      }
    }
    </script>


    But when I execute, the browser displays:

    [Vue warn]: Error in v-on handler: "TypeError: this.load is not a function"


    How can one component refer to a property or method of another? If I wrote everything in one file (I did it before), then it could be done.

    var vm = new Vue (...)

    and then have access everywhere through vm . And here it just says:

    new Vue({
      store,
      vuetify,
      render: h => h(App)
    }).$mount('#app')


    I don't understand how it works ...

    And how do you correctly make this wrapper so that you can use it anywhere in the application? There was a thought to use storage: put load in storage and call it like this. $ Store.load () . Will it be Feng Shui or is it a crutch?
    JavaScript Sean Shepard, Feb 2, 2019

  • 1 Answers
  • 0
    Plugins
    Vivienne Wilson

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!