Sending data using props in vue

See also questions close to this topic

• vue router.push : TypeError: onComplete is not a function

  I am new to VueJS + Laravel after years using CodeIgniter and trying to understand how things work with Laravel + VueJS. Anyway, I got a test page running with a Vue Loading Layer package that triggers a loading overlay on the onClick event that loads a new page using router.push. I read the documentation that there is 2 additional parameters, ie. onComplete and onAbort for router.push and came up with the following method. Everything work as expected except that I am getting an error in the console.

  console error

  [vue-router] uncaught error during route navigation:
  TypeError: onComplete is not a function
  

  goto method

  goTo(routeName) {
      let self = this
      self.$nextTick( function() {
  
          // Show Vue Loading Layer
          let loader = this.$loading.show({
              loader: 'spinner',
              color: '#e8b30f',
              backgroundColor: '#000',
              opacity: 0.5,
          })
  
          // Retrieve new page
          self.$router.push(
  
              // First param : location
              {name: routeName},
  
              // Second param : onComplete
              setTimeout(() => loader.hide(), 3 * 1000)
          )
      })
  }
  

  Even though I got the expected result, I still want to know why that error appears on the console.

  Second, is there a better way of doing this? The only reason I used setTimeout() is the new page was loaded too fast for the loading overlay to be shown properly without setting the setTimeout().

  Thank you for any help or tips.
• Filter UserID & display Name on Vuejs

  The userID (staffID) i received is numeric. I cant change the database & was told to use filter. How can filter get userID value but display the name of that userID?

  const userFilter = {
  userID: this.$store.getters.userId,
  getName: function(userID) {
    return this.$store.getters.name;
  }}
  

  The filter method is in globalfunction.js and the code above got an error saying Cannot read property 'userID' of undefined.
• How to add custom blocks / containers in Vuepress?

  I've set up a website in VuePress and I found that it supports markdown-it's :::danger, :::tip, :::info etc to generate custom containers. I was wondering if this could be extended in a way, to use for example :::card or :::example or whatever you want.

  I found https://github.com/posva/markdown-it-custom-block, but can't find out how to implement it.

  Any advice is much appreciated!
• Vue- variables inside event bus are not reactive

  I created global event bus

  Vue.prototype.$eventHub = new Vue()
  

  In 'component 2' clicking on the button, emitted the event then navigating to 'component 1'

  this.$eventHub.$emit('deleted')
  

  In another 'component 1' i am trying to use it

  data: function () {
    return {
      testVariable : true
    }
  },
  beforeMount () {
    var self = this
    this.$eventHub.$on('deleted', function () {
      console.log("executed")
      self.testVariable = false
    })
  }
  

  In the template section i used {{testVariable}}, it's always displaying true. Why it is not reactive? what did i miss?
• How do I force line break in donut chart label?

  I'm using C3 donut chart,

  

  But the label is too long and I need a word-break like feature.

  So I tried to set the following properties, non of them works

  axis: {
    x: {
      tick: {
        width: 100
      }
    }
  },
  legend: {
    maxWidth: 100px;
  },
  

  Any ideas?
• Looking to group array by values in the sub array

  Trying to parse one data set that has a bunch of the same "secondaryIDs" in way that i can group and iterate through them together.

  In english what im trying to do is "select a unique group of all items where the value of field is unique "

  'use strict';
  
  const data = [{
      Group: 'A',
      Name: 'SD'
  }, {
      Group: 'B',
      Name: 'FI'
  }, {
      Group: 'A',
      Name: 'MM'
  }, {
      Group: 'B',
      Name: 'CO'
  }];
  
  let unique = [...new Set(data.map(item => item.Group))];
  console.log(unique);
  

  Which gives ["A"],["B"]

  but what im looking for is

  {
    A: [ "SD","MM" ],
    B: [ "FI","CO" ],
  }
  
• Vue.js Passed props are undefined in any scope

  I am doing single page application writing style to build my app with vue. However the prop data passed to a child component is not being loaded any scope(created(), mounted() etc).

  router/index.js

  import Vue from 'vue'
  import Router from 'vue-router'
  import Ques from '@/components/timeline/Ques'
  import Timeline from '@/components/Timeline'
  
  Vue.use(Router);
  
  
  export default new Router({
   mode: 'history',
   routes: [
     {
       path: '/feeds',
       name: 'Timeline',
       component: Timeline
     },
     {
       path: '/ques',
       name: 'Ques',
       component: Ques
      }
     ]
     })
  

  timeline.vue

      <template>
      <main class="timeline_wrapper">
      <Ques :timelinePosts="posts"></Ques>
      </main>
  
      </template>
  
    <script>
      import Ques from './timeline/Ques.vue'
      export default {
      name: "timeline",
      data() {
        return {
          posts: [
            {
              id: 0,
              name: 'hi'
            },
          ]
        }
       },
     components: { Ques }
     }
  </script>
  

  Ques.vue

  <template>
  </template>
  
  <script>
     export default {
       name: "Ques",
       props: [
       'timelinePosts'
       ],
     created () {
       console.log(this.timelinePosts);
     }
    }
  </script>
  

  what's following the console.log is an error saying the timelinePosts is 'undefined'. How can the prop value be properly loaded in the child component?
• Too reload or too update: SPA

  In a single page application, when you post some data to the server to either create or update a record in database. Which method is prefer after a success (200) response? Perform a window.location.reload() to rebuild the table grid? Or return a newly or updated data to push back in the component model?

  I understand it mainly a preference. Just curious which is perceive better.
• Simple comparing throw wrong result Vue

  I've got 2 components in a modal.

  The first:

                <v-text-field
            label="Limite de faltantes"
            type="number"
            v-model="lim_faltProd"
            ></v-text-field>
  

  The second:

            <v-text-field
            label="Limite de excedentes"
            type="number"
            v-model="lim_excProd"
            ></v-text-field>
  

  My component export:

  export default {
    props: ['nombre', 'precio', 'lim_falt', 'lim_exc', 'id'],
    data () {
      return {
        error: '',
        idProd: this.id,
        nombreProd: this.nombre,
        precioProd: this.precio,
        lim_faltProd: this.lim_falt,
        lim_excProd: this.lim_exc
      }
    },
    watch: {
      nombre () {
        this.nombreProd = this.nombre
      },
      precio () {
        this.precioProd = this.precio
      },
      lim_falt () {
        this.lim_faltProd = this.lim_falt
      },
      lim_exc () {
        this.lim_excProd = this.lim_exc
      },
      id () {
        this.idProd = this.id
      }
  }
  

  So when i try to do such a simple thing like

  this.lim_faltProd >= this.lim_excProd

  It gets crazy.

  Look at this, I get

  console.log(this.lim_faltProd) // 20

  console.log(this.lim_excProd) // 100

  console.log(this.lim_faltProd >= this.lim_excProd) // THROWS TRUE!!!!

  ---

  ---

  I'll show it: I've a function where I do:

       async registrarProducto () {
  this.error = this.lim_faltProd > this.lim_excProd
  }
  

  RESULT:

  
• Vue Router beforeEach not being called

  I'm currently having trouble finding a bug in router code, it worked before and I don't know when or how I broke it. I already checked in older versions but it seems to not have changed. The problem is that even when I'm deleting all code out of the beforeEach Hook in my router and just using a console.log() statement, nothing gets printed in the console and my auth-guard is therefore not working. I tried to change the order according to this: https://forum.vuejs.org/t/router-beforeeach-if-manually-input-adress-in-browser-it-does-not-work/12461/3 but nothing changed.

  I am having the following code:

  router/index.js

  router.beforeEach = (to, from, next) => {
    console.log('he?')
    const currentUser = Firebase.auth().currentUser
    const isGold = store.getters['user/isGold']
    const requiresAuth = to.matched.some(route => route.meta.requiresAuth)
    const requiresGold = to.matched.some(route => route.meta.requiresGold)
  
    console.log(requiresGold, isGold, 'halloooooooo?')
  
    if (currentUser && to.name === 'Login') {
      next('/dashboard')
    }
  
    if (requiresGold && !isGold) {
      console.log('trigger')
    }
  
    if (requiresAuth && !currentUser) {
      next('/login')
    } else {
      next(false)
    }
  }
  

  main.js

  Firebase.auth().onAuthStateChanged(user => {
    if (user) {
      const getToken = () => {
        return user.getIdToken(true).then(token => {
          store.dispatch('user/setToken', token)
        })
      }
      getToken().then(() => {
        store.dispatch('user/setUser')
        setInterval(getToken, 3540 * 1000)
      })
    }
    new Vue({
      el: '#app',
      store,
      router,
      template: '<App/>',
      components: { App }
    })
  

  })

  Thanks in advance for any help!
• How to make redirection to some vue form from laravel's control?

  In my Laravel 5.6 application with vue.js 2.5.7 I and vue-router 3 I use Socialite for login into the system and in case of success I need to make redirection to some vue form with success message and next options available.

  For this I make redirection like:

      $url= $site_hosting . "/home";
      return redirect()->route($url, [])->with([
          'text'   => 'google_new_user',
          'type'   => 'success',
          'action' => 'successful_login'
      ]);
  

  where url has value like

  example.com/home
  

  the question is that I do not know how redirecting from Laravel control to point to Vue component, defined in resources/assets/js/app.js file as

  const routes = [
      {
          components: {
              notFound: NotFound,
          ...
  

  How can it be done ?

  Thanks!
• What is the difference between `path` and `fullPath` in VueJS router?

  In my router.js file, when I'm using the beforeEach method, I get path and fullPath in the properties of to and from parameters. I'm wondering which one I should use for redirection purpose. I've seen both been used and I don't when to use which, and what is the difference between both.

  An exemple:

  export default new Router({
      mode: 'history',
      base: process.env.BASE_URL,
      routes: [{
          path: 'login'
          beforeEnter: (to, from, next) => {
              console.log(to, from) // the routes
              if (User.loggedIn()) {
                  next(from.fullPath) // or maybe `from.path`
              } else {
                  next()
              }
          },
      }]
  })