Sending properties to a Vue 3 composable does not result in reactivity

Having an issue where I am attempting to pass a component prop to a composable, but the computed function within the composable is not being called when the prop changes.

import { toRefs } from 'vue';

export default {
  props: {
    aProp: String,
  },
  setup(props) {
    // Having trouble with this code segment
    const { aProp } = toRefs(props);
    const { aHasChanged } = useA(aProp);

    return {
      aHasChanged,
    };
  },
};

Here's the composable code:

import { computed } from 'vue';
function useComposable(aProp) {
  const aHasChanged = computed(() => {
    return aProp === '';
  });

  return {
    aHasChanged,
  };
}

export { useComposable };

Check out the example on StackBlitz: https://stackblitz.com/edit/github-yfh8fb-xaspss?file=composables%2Fa.js

Answer №1

The computed function is not being triggered because the value of aProp is not being accessed. In JavaScript, Vue reactivity cannot be achieved simply by accessing the parameter aProp without also accessing its properties.

aProp is a ref within the useComposable function, and it should be written as:

      const checkAChange = computed(() => {
        return aProp.value !== ''; 
      });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Prevent spaces from being entered in a textbox in asp.net with JavaScript

How can I prevent spaces from being entered into a textbox using JavaScript? My current script works, but fails when the space bar is pressed continuously. Any suggestions on improving this issue would be greatly appreciated. Below is the code I am curren ...

Reversing the sequence of code in JavaScript - react native

I'm currently working on tracking the number of times a button is pressed within one second. For the most part, it's functioning correctly as it tracks and displays the count. The issue arises when it displays the button press count from the pr ...

Ways to display the chosen value based on the item's index using Javascript in Angular

If you want to view the complete code, just click on this link. I have identified the main issue here. Check out the code here: https://stackblitz.com/edit/test-trainin-2?file=src/app/app.component.html The problem is when you interact with the green bal ...

Issue encountered: Failure in automating login through Cypress UI with Keycloak

Struggling with automating an e-commerce store front using Cypress, specifically encountering issues with the login functionality. The authentication and identity tool in use is keycloak. However, the Cypress test fails to successfully log in or register ...

Populate vue-multiselect with links from the router

Is there a way to populate the vue-multiselect dropdown with <router-link> options? Typically, router links are defined declaratively in the <template>, but vue-multiselect relies on binding an array of options. Any suggestions on how to approa ...

Exploring Firebase: Understanding the timing of the value event firing and new child reference addition

This code demonstrates a simple Firebase - VueJS application, available for reference in this codeSandBox demo. app.vue <template> <div class="container"> <!-- Adding Quote --> <add-quote/> <!-- Display Quotes -- ...

Is there a way to flip a figure that is flipped upside down?

I'm currently working on creating a map using a json file to go from d3.js to Three.js. However, when the map is displayed, it appears upside down. I'm wondering if there is a way to flip it so that it displays correctly. As a newcomer to d3 and ...

How to use jQuery to retrieve the smallest and largest dates from an object with key-value pairs

Here is an example of my associative array with start and end dates: [{"start_date":"2018-11-20", "end_date":"2019-01-20", "name":"NO Name"}, {"start_date":"2018-10-10", "end_date":"2019-02-14", "name":"Name No"}, {"start_date":"2019-02-15", "end_date": ...

Using AJAX to dynamically inject a JavaScript function into the webpage

When I load a portion of a page using AJAX calls, sometimes the loaded content may contain script functions attached to controls with different events. The issue arises when these events are triggered, resulting in an error message saying "object not found ...

Tips on maintaining the functionality of the :hover selector even after loading a PDF document

Recently, I noticed an issue with an anchor element that is used to load a PDF. Once the PDF loads, the :hover styling seems to get stuck until I click elsewhere on the screen, which then resets it back to normal. Surprisingly, there is no JavaScript inv ...

Automatically open the Chackra UI accordion upon page loading

Currently, I am working on developing a side menu with accordion functionality in Nextjs. I have managed to get the index values from 0 to 1 based on the page URL, but I am facing an issue where the accordion is not opening as expected. Each time a user ...

AJAX - Achieving Dual Outcomes with Page Reload

Recently, I've been working on code that pulls information from an XML feed using AJAX and displays it based on certain conditions: $.ajax({ type: "GET", url: "testxml.xml", dataType: "xml", success: function(xml) { $(xml).fin ...

Transfer information to an excel spreadsheet using vue2

I am looking for a way to export data from my Vue2 app to excel, with a layout similar to the image provided below. I have explored various Vue libraries, but none of them seem to offer the functionality I need for creating such a layout. The only one th ...

Animate.css plugin allows for owl-carousel to smoothly transition sliding from the left side to the right side

I have a question regarding the usage of two plugins on my website. The first plugin is Owl Carousel 2, and the second one is Animate.css. While using `animateIn: 'slideInLeft'` with Owl Carousel 2 is working fine, I am facing an issue with `ani ...

Navigating through files beyond the starting point

In the process of constructing a React seed project, I have organized the structure as follows: project │ package.json │ webpack.config.js │ .babelrc │ └───bin │ app.bundle.js │ └───node_modules | └─── ...

The mobile menu pop-up is malfunctioning

Encountering some challenges with the mobile menu on a website. The opening and closing animation of the background is functioning correctly, displaying the information as intended. However, when testing and clicking on one of the links, the animation simp ...

Acquire the Microsoft Graph Token using the adal-angular package's authentication context provided by adal.js

I am currently utilizing the authenticationContext that was established using the 'adal-angular/lib/adal.js' package in order to obtain a token for accessing microsoft graph resources. Error: User Login is required. The error message appears a ...

Puppeteer gathers data on page loading - including a comprehensive list of files loaded and their respective sizes

Is it feasible to compile a complete list of all files loaded on a webpage using Google's Puppeteer? This would include scripts, styles (excluding inline), images, videos, and audio, along with their respective sizes. If Puppeteer cannot provide this ...

The ASP.NET MVC controller did not receive the JSON object properly due to some missing properties

I am facing an issue when trying to pass a JSON object to my ASP.NET MVC controller. The JSON is set in JavaScript in this way: jsonChildren = '{ "childImproItems" : [{ "Theme":"tralalali" }, { "Theme":"tralalali" }]}'; ... $.ajax({ ...

Mastering the art of simultaneously running multiple animations

Utilizing two functions to apply a Fade In/Fade Out effect on an element. Confident in the functionality of both functions, as testing them sequentially in the Console proves their effectiveness. However, executing: fadeIn() fadeOut() seems to result in ...