Changing the value in real time

Published 4 weeks ago by Uzenkov

Hello everybody! Can someone tell me the correct solution of the problem? I need the counter to be changed when an element is added.

I have the following...

ShowReminders.vue

<template>
  <el-badge :value="reminders.count" class="item">
    <span uk-icon="icon: bell"></span>
  </el-badge>
</template>

<script>

  export default {

    data() {
      return {
        reminders: {
          count: window.reminders.length
        }
      }
    }

  }

</script>

CreateLead.vue

<template>
...
<el-button type="success" @click="addLead" round>Add Lead</el-button>
</template>

<script>
  export default {

    ...

    addLead() {
      window.reminders.length++ // it doesn't work
      ...
    }

    ...

  }
</script>
Best Answer (As Selected By Uzenkov)
tykus

Per other thread, binding to the function rather than the component is part of the problem:

Event.$on('lead-created', function (val) {
    this.reminders.count += val;
}.bind(this));

You should be working now, but you might consider using Vuex to maintain the state of reminders so that there is a single source of truth. As you are now, your reminders count (badge) will be out of step with the contents/size of window.reminders

tykus
tykus
4 weeks ago (389,800 XP)

window data is not reactive, you need to change the Vue component's data"

    addLead() {
      this.reminders.count++
      ...
    }
Uzenkov

@tykus But i have 2 different components, how can I pass the processed variable from CreateLead.vue to ShowReminders.vue?

tykus
tykus
3 weeks ago (389,800 XP)

Sorry @Uzenkov it wasn't apparent to me at the outset that there were two different components. There are a few different ways to communicate between components depending on what the data is and how the components are related to one another, e.g.

  • if they are parent/child you would pass data down using a prop, or up using an event,
  • if they are siblings then a simple event bus might be more useful; you can use a separate Vue instance as an event bus
  • if the counter is needed on a global basis in your app, then Vuex might be a consideration

I can help you if you give more information on how to implement any of the above.

Uzenkov

@tykus Thank you for the answer! I'll try to describe in more detail.

Here is screencast how it looks now — reminders counter is not updated.

I use Laravel and Vue.js and my structure app.js is:

Vue.component('show-reminders', require('./components/reminders/ShowReminders.vue'));
Vue.component('create-lead', require('./components/lead/CreateLead.vue'));

window.Event = new Vue();

const application = new Vue({
  el: '#application'
});

I tried to use events, but the problem still has not been solved.

I'll be glad to any help.

tykus
tykus
3 weeks ago (389,800 XP)

Per other thread, binding to the function rather than the component is part of the problem:

Event.$on('lead-created', function (val) {
    this.reminders.count += val;
}.bind(this));

You should be working now, but you might consider using Vuex to maintain the state of reminders so that there is a single source of truth. As you are now, your reminders count (badge) will be out of step with the contents/size of window.reminders

Uzenkov

@tykus Thank you, it works for me! Now I'll try to understand the Vuex.

tykus
tykus
3 weeks ago (389,800 XP)

Vuex might be overkill - it really depends on how you want to manage the reminders in your app. You can get away with what you have now, but understand that there is a disconnection between the badge number and the actual count on the window object.

If you're happy, mark the correct answer : )

Uzenkov

@tykus I'm sorry for the trouble and newbie question. How do I know where my parent components are in my structure, and where are the children?

tykus
tykus
3 weeks ago (389,800 XP)

It depends on how you register your components. As you have implemented you app, the components are globally registered, so a child component could conceivably be nested inside any other component.

On the other hand, if you were registering components locally you would be explicit about your component hierarchy.

In either case, you can use the Vue;js Chrome Extension to see how your components are arranged in the Components section on the right side.

Uzenkov

@tykus Here is my components structure. As I understand it, the first levels is the parents :)

Please sign in or create an account to participate in this conversation.