The reactivity of a Vue.js computed property diminishes when it is transmitted through an event handler

Question

The reactivity of a Vue.js computed property diminishes when it is transmitted through an event handler

Within my main application, I've implemented a Modal component that receives content via an event whenever a modal needs to be displayed. The Modal content consists of a list with an associated action for each item, such as "select" or "remove":

Vue.component('modal', {
  data() {
    return {
      shown: false,
      items: [],
      callback: ()=>{}
    }
  },
  mounted() {
    EventBus.$on('showModal', this.show);
  },
  template: `<ul v-if="shown">
    <li v-for="item in items">
      {{ item }} <button @click="callback(item)">Remove</button>
    </li>
  </ul>`,
  methods: {
    show(items, callback) {
      this.shown = true;
      this.items = items;
      this.callback = callback;
    }
  }
});

However, when passing a computed property to the modal like in the following component, the reactive connection is lost -> causing the list not to update if the action is "remove".

Vue.component('comp', {
  data() {
    return {obj: {a: 'foo', b: 'bar'}}
  },
  computed: {
    objKeys() {
      return Object.keys(this.obj);
    }
  },
  template: `<div>
    <button @click="showModal">Show Modal</button>
    <modal></modal>
  </div>`,
  methods: {
    remove(name) {
      this.$delete(this.obj, name);
    },
    showModal() {
      EventBus.$emit('showModal', this.objKeys, this.remove);
    }
  }
});

You can view the minimal use case on this fiddle: https://jsfiddle.net/christophfriedrich/cm778wgj/14/

I suspect there might be a bug - shouldn't Vue recognize that objKeys is used in the rendering of Modal and update it accordingly? (The propagation of changes from obj to objKeys functions correctly.) If not, what am I missing and how can I achieve the desired outcome?

javascript vue.js vuejs2 vue-reactivity

Answer 1

Answer №1

The modal functionality is now operational with its own distinct set of items:

 template: `<ul v-if="shown">
    <li v-for="item in items">
      {{ item }} <button @click="callback(item)">Remove</button>
    </li>
  </ul>`,
  methods: {
    show(items, callback) {
      this.shown = true;
      this.items = items;
      this.callback = callback;
    }
  }

This independent copy is generated once, upon invoking the show method, and what you are duplicating is simply the value computed at the time you trigger the showModal event. What gets passed to show is not a computation, and what it assigns is not one either. It's merely a value.

If at any point within your codebase, you executed an assignment like

someDataItem = someComputed;

The data item would not mirror the computed function but rather represent a snapshot of its value at the assignation moment. This elucidates why transferring values around in Vue is ill-advised: they do not inherently synchronize.

Instead of relocating values back and forth, you can utilize a function that retrieves the desired value - essentially acting as a getter function. For enhanced readability, you may formulate a computed property predicated on said function. Subsequently, your script transforms into:

const EventBus = new Vue();

Vue.component('comp', {
  data() {
    return {
      obj: {
        a: 'foo',
        b: 'bar'
      }
    }
  },
  computed: {
    objKeys() {
      return Object.keys(this.obj);
    }
  },
  template: `<div>
    <div>Entire object: {{ obj }}</div>
    <div>Just the keys: {{ objKeys }}</div>
    <button @click="remove('a')">Remove a</button>
    <button @click="remove('b')">Remove b</button>
    <button @click="showModal">Show Modal</button>
    <modal></modal>
  </div>`,
  methods: {
    remove(name) {
      this.$delete(this.obj, name);
    },
    showModal() {
      EventBus.$emit('showModal', () => this.objKeys, this.remove);
    }
  }
});

Vue.component('modal', {
  data() {
    return {
      shown: false,
      getItems: null,
      callback: () => {}
    }
  },
  mounted() {
    EventBus.$on('showModal', this.show);
  },
  template: `<div v-if="shown">
  <ul v-if="items.length>0">
    <li v-for="item in items">
      {{ item }} <button @click="callback(item)">Remove</button>
    </li>
  </ul>
  <em v-else>empty</em>
</div>`,
  computed: {
    items() {
      return this.getItems && this.getItems();
    }
  },
  methods: {
    show(getItems, callback) {
      this.shown = true;
      this.getItems = getItems;
      this.callback = callback;
    }
  }
});

var app = new Vue({
  el: '#app'
})

<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <comp></comp>
</div>

Answer 2

The modal functionality is now operational with its own distinct set of items:

 template: `<ul v-if="shown">
    <li v-for="item in items">
      {{ item }} <button @click="callback(item)">Remove</button>
    </li>
  </ul>`,
  methods: {
    show(items, callback) {
      this.shown = true;
      this.items = items;
      this.callback = callback;
    }
  }

This independent copy is generated once, upon invoking the show method, and what you are duplicating is simply the value computed at the time you trigger the showModal event. What gets passed to show is not a computation, and what it assigns is not one either. It's merely a value.

If at any point within your codebase, you executed an assignment like

someDataItem = someComputed;

The data item would not mirror the computed function but rather represent a snapshot of its value at the assignation moment. This elucidates why transferring values around in Vue is ill-advised: they do not inherently synchronize.

Instead of relocating values back and forth, you can utilize a function that retrieves the desired value - essentially acting as a getter function. For enhanced readability, you may formulate a computed property predicated on said function. Subsequently, your script transforms into:

const EventBus = new Vue();

Vue.component('comp', {
  data() {
    return {
      obj: {
        a: 'foo',
        b: 'bar'
      }
    }
  },
  computed: {
    objKeys() {
      return Object.keys(this.obj);
    }
  },
  template: `<div>
    <div>Entire object: {{ obj }}</div>
    <div>Just the keys: {{ objKeys }}</div>
    <button @click="remove('a')">Remove a</button>
    <button @click="remove('b')">Remove b</button>
    <button @click="showModal">Show Modal</button>
    <modal></modal>
  </div>`,
  methods: {
    remove(name) {
      this.$delete(this.obj, name);
    },
    showModal() {
      EventBus.$emit('showModal', () => this.objKeys, this.remove);
    }
  }
});

Vue.component('modal', {
  data() {
    return {
      shown: false,
      getItems: null,
      callback: () => {}
    }
  },
  mounted() {
    EventBus.$on('showModal', this.show);
  },
  template: `<div v-if="shown">
  <ul v-if="items.length>0">
    <li v-for="item in items">
      {{ item }} <button @click="callback(item)">Remove</button>
    </li>
  </ul>
  <em v-else>empty</em>
</div>`,
  computed: {
    items() {
      return this.getItems && this.getItems();
    }
  },
  methods: {
    show(getItems, callback) {
      this.shown = true;
      this.getItems = getItems;
      this.callback = callback;
    }
  }
});

var app = new Vue({
  el: '#app'
})

<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <comp></comp>
</div>

Answer 3

Answer №2

When you pass a value to a function, it's not the same as passing a prop to a component. Props are reactive because they trigger changes, whereas values remain static. If you want reactivity, make sure to include items as a prop in the template of your comp component.

Instead of using callbacks, consider implementing a process where events are emitted and handled in the parent component for removing items.

const EventBus = new Vue();

Vue.component('comp', {
  data() {
    return {
      obj: {
        a: 'foo',
        b: 'bar'
      }
    }
  },
  computed: {
    objKeys() {
      return Object.keys(this.obj);
    }
  },
  template: `<div>
    <div>Entire object: {{ obj }}</div>
    <div>Just the keys: {{ objKeys }}</div>
    <button @click="remove('a')">Remove a</button>
    <button @click="remove('b')">Remove b</button>
    <button @click="showModal">Show Modal</button>
    <modal :items="objKeys" event-name="remove" @remove="remove"></modal>
  </div>`,
  methods: {
    remove(name) {
      this.$delete(this.obj, name);
    },
    showModal() {
      EventBus.$emit('showModal');
    }
  }
});

Vue.component('modal', {
  props: ['items', 'eventName'],
  data() {
    return {
      shown: false,
    }
  },
  mounted() {
    EventBus.$on('showModal', this.show);
  },
  template: `<div v-if="shown">
  <ul v-if="items.length>0">
    <li v-for="item in items">
      {{ item }} <button @click="emitEvent(item)">Remove</button>
    </li>
  </ul>
  <em v-else>empty</em>
</div>`,
  methods: {
    show(items, callback) {
      this.shown = true;
    },
    emitEvent(item) {
      this.$emit(this.eventName, item);
    }
  }
});

var app = new Vue({
  el: '#app'
})

<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <comp></comp>
</div>

Answer 4

When you pass a value to a function, it's not the same as passing a prop to a component. Props are reactive because they trigger changes, whereas values remain static. If you want reactivity, make sure to include items as a prop in the template of your comp component.

Instead of using callbacks, consider implementing a process where events are emitted and handled in the parent component for removing items.

const EventBus = new Vue();

Vue.component('comp', {
  data() {
    return {
      obj: {
        a: 'foo',
        b: 'bar'
      }
    }
  },
  computed: {
    objKeys() {
      return Object.keys(this.obj);
    }
  },
  template: `<div>
    <div>Entire object: {{ obj }}</div>
    <div>Just the keys: {{ objKeys }}</div>
    <button @click="remove('a')">Remove a</button>
    <button @click="remove('b')">Remove b</button>
    <button @click="showModal">Show Modal</button>
    <modal :items="objKeys" event-name="remove" @remove="remove"></modal>
  </div>`,
  methods: {
    remove(name) {
      this.$delete(this.obj, name);
    },
    showModal() {
      EventBus.$emit('showModal');
    }
  }
});

Vue.component('modal', {
  props: ['items', 'eventName'],
  data() {
    return {
      shown: false,
    }
  },
  mounted() {
    EventBus.$on('showModal', this.show);
  },
  template: `<div v-if="shown">
  <ul v-if="items.length>0">
    <li v-for="item in items">
      {{ item }} <button @click="emitEvent(item)">Remove</button>
    </li>
  </ul>
  <em v-else>empty</em>
</div>`,
  methods: {
    show(items, callback) {
      this.shown = true;
    },
    emitEvent(item) {
      this.$emit(this.eventName, item);
    }
  }
});

var app = new Vue({
  el: '#app'
})

<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <comp></comp>
</div>

The reactivity of a Vue.js computed property diminishes when it is transmitted through an event handler

Answer №1

Answer №2

Similar questions

The information returned to the callback function in Angular comes back null

Drawing recursive 2D tree fractals using WebGL technology

Oops! An error occurred: fs.readFileSync is not a valid function to perform the Basic

Streaming live audio through socket io. Need help troubleshooting ALSA shutdown issue

Using HTML and JavaScript to add variables into the URL within the window.location

Transitioning from GeometryUtils.merge() to geometry.merge()

How can a pop-up be positioned to appear in the right bottom corner using jQuery

Manipulating viewport settings to simulate smaller screens on a desktop device

Utilizing Props in Vue.js to Access Data for v-model

Counting Slides in a Slick Carousel

Creating a user-friendly HTML form to convert multiple objects into JSON format

What is the most effective method for displaying a child modal within a map?

What could be the reason behind the malfunctioning of my three.js lighting system?

In configuring the print settings, I specified margins to ensure proper formatting. However, I noticed that the margin adjustment only applies to the first page. I need

"Troubleshoot: jQuery UI accordion not functioning properly in response to

Creating a JSON body using a JavaScript function

Starting a tab just once

Navigating with router.push in Vue.js to the same path but with different query parameters

Challenges in navigating routes with vue.js

Attempting to design a customized tooltip for an SVG element embedded within the HTML code