Execute function when multiple computed properties are true / filled (VueJS)

I am looking to execute a function in my methods section only when all three variables, test1, test2, and test3, are populated. If any of them are empty, I want nothing to happen.

I have attempted to achieve this using computed properties and then with a watcher, but unfortunately, it has not been successful for me.

I would appreciate any guidance or assistance on this matter.

computed: {
  test1() {
    return this.$store.state.test1; 
  },

  test2() {
    return this.$store.state.test2;
  },

  test3() {
    return this.$store.state.test3;
  },

  check_data() {
    return this.test1 && this.test2 && this.test3;
  },
},

watch: {
  check_data() {
    this.trigger_method()
  },
},
javascriptvue.jsvuejs3computed-properties

Answer №1

Did you experiment with utilizing the deep watcher functionality?


watch: {
  data_checker: {
     deep: true, 
     handler(updatedValue, previousValue) {
        // perform an action
     }
  }

},

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

Use of image tag inside the title attribute

After coming across the question on how to add an image tag inside the title attribute of an anchor tag and finding only one answer claiming it's impossible, I stumbled upon a page where it was actually done: I decided to view the source of the page ...

javascripthtml

Issues surrounding the determination of CSS attribute value using .css() function within a variable

I have been working on a function to change the color of a span dynamically from black to a randomly selected color from a predefined list. However, I am encountering an issue with the .css("color", variableName) part of my code and suspect that my synta ...

javascriptjquerycss

Modify a CSS style with JavaScript or jQuery

Can CSS rules be overwritten using jQuery or JavaScript? Imagine a table with rows categorized by different classes - "names" for persons and "company" for companies. How can we efficiently hide or show specific rows based on these classes? If we have a ...

javascriptjquerycss

"Incorporating JSON and Ajax to dynamically populate one select based on the selection in another select

I need to display data from a JSON file in select options, and here is the structure of my JSON file: [{ "vehicle": "car1", "type": [ {"name" : "BMW", "details" : [{ "color" : "red", "price" : "50000" }, ...

javascriptjsonajax

Trouble with downloading a file from an HTML hyperlink

When I attempt to download a file from my file folder using the absolute path <a href='N:\myName\test.xlsx'>download</a>, the file opens directly instead of downloading. However, if I use the relative path <a href=&apos ...

javascripthtmlhyperlink

Stagnant User Interface

My current project involves fetching data from a database in c# and passing it to Javascript using Ajax. I store this data in arrays and query the database every 3 seconds. The data is utilized to update a diagram, such as changing the color of the track. ...

javascriptc#ajaxuser-interface

Where can rootScope values typically be found - in a cookie or local storage?

What is the storage location of rootScope values - cookie or local storage? I am uncertain about how rootScope works in angularjs. I am passing a value between two controllers, so I am using $rootScope. I would like to understand how $rootScope ...

javascriptangularjscookieslocal-storagerootscope

Eliminating the table header in the absence of any rows

I have successfully implemented a Bootstrap table in my React application, where users can add or delete rows by clicking on specific buttons. However, I want to hide the table header when there are no rows present in the table. Can anyone guide me on how ...

javascriptreactjsbootstrap-4react-reduxmaterial-ui

Retrieve the public URL from the index.html file following the build process

In my project, I utilized ReactJS by creating an app with the command npx create-react-app my-app. To build the project, I used yarn build. Within the package.json file, the scripts section appears as follows: "scripts": { "start": "react-scripts sta ...

javascriptreactjsnpmdeploymentbuild

Comparing Arrays with jQuery

I am currently working on a tic-tac-toe project that involves a simple 3x3 grid. I have been storing the index of each selected box in an array for each player. However, I am facing difficulty in comparing my player arrays with the winner array to determin ...

javascriptjqueryarrays

Injecting environment variables into webpack configuration

My goal is to set a BACKEND environment variable in order for our VueJS project to communicate with the API hosted there, but I keep receiving an error message saying Unexpected token :. Here is the current code snippet from our config/dev.env.js, and I&a ...

javascriptwebpackvue.js

Using a combination of nested fetch() and array.map() does not allow for the return

My previous coding experience didn't present any issues with rendering HTML. Typically, I only needed to use one fetch() function. However, in this particular scenario, it appears that I require two fetch calls. The first fetch retrieves a product ID ...

javascriptnode.jsexpressmongoosefetch-api

Guide to generating touch interactions with Angular 2 and beyond

What are some methods for implementing touch events in Angular, since Angular does not natively support touch events like (click)? ...

javascriptangulartouch

jQuery allows us to set two separate conditions for two distinct variables

I've written this function: settings_rc_left.on('click', function(){ var settings_list_last_element_id_one = settings_menu_element.attr('id') == 'r_02', settings_list_last_element_id_two = settings_menu_eleme ...

javascriptjqueryclickattr

Dynamic autocomplete feature with AJAX integration for filtering in Flask

Looking for some guidance on creating an HTML form with two input fields. Check out the HTML template code below: <form role="form" action="/cities/" method="get" autocomplete="on"> <label for="#input1"><strong>Country:</strong&g ...

javascriptjqueryajaxautocompleteflask

Steps to display the leave site prompt during the beforeunload event once a function has finished running

While facing a challenge with executing synchronous Ajax methods in page dismissal events, I discovered that modern browsers no longer support this functionality in the "beforeunload" event. To work around this issue, I implemented a new promise that resol ...

javascriptajaxasp.net-mvcgoogle-chromemicrosoft-edge

In order to add value, it is necessary to insert it into the text box in HTML without using the "on

example <input type="text" id="txt1" onChange="calculateTotal();" /> <input type="text" id="txt2" onChange="calculateTotal();" /> <input type="text" id="txt3" onChange="updateValue();" readonly/> <input type="text" id="txt4" onChange= ...

javascripthtml

Unable to choose an item from b-dropdown in vuejs

Greetings! I am currently working on creating a basic dropdown menu using bootstrap-vue in vuejs. The code snippet in my component looks like this : <b-col sm="2"> <b-dropdown :text="selectedItem" v-model="selectedItem"> <b-dropdo ...

vue.jsbootstrap-vue

Issue with JavaScript JSON.parse converting string values to Infinity

Does anyone have an explanation for this peculiar behavior I encountered while using the JSON.parse() function in Javascript? Normally, when you pass a string to it, it should generate an error. For example, JSON.parse("5ffc58ed1662010012d45b30" ...

javascriptjsoninfinity

[Vue alert]: Element with id #app not found

I have set up a new Laravel project with all the components updated and running smoothly. Recently, I attempted to include app.js in my welcome.blade.php file. However, upon adding it, I encountered the following error: [Vue warn]: Cannot find element: ...

laravelvue.jslaravel-5.3