"Encountering a strange behavior in Vue.js: the created() hook

I made a custom feature to refresh my data from the database by clicking a button:

<template>
  <base-projects :projects="projects" />
</template>

<script>
import { mapGetters } from 'vuex';
import Projects from './Projects';
import projectService from '@/services/projectService';

export default {
  components: { Projects },
  computed: {
    ...mapGetters([
      'projects'
    ])
  },
  created() {
    projectService.getAllCompanyProjects();
  },

};
</script>

Although it works well initially, it fails to reload the data on subsequent clicks. Any suggestions on how to resolve this inconsistency?

Your assistance is greatly appreciated!

Answer №1

Assuming that your data is being fetched from the database using the

projectService.getAllCompanyProjects();
function, if you want to reload the data upon clicking a button, I recommend binding the "click" event to one of your component methods.

<template>
  <base-projects :projects="projects" @click.native="refreshData" />
</template>

<script>
import { mapGetters } from 'vuex';
import Projects from './Projects';
import projectService from '@/services/projectService';

export default {
  components: { Projects },
  computed: {
    ...mapGetters([
      'projects'
    ])
  },
  methods: {
    refreshData() {
      projectService.getAllCompanyProjects();
    }
  }    
};
</script>

The refreshData method will be activated when the user clicks on the DOM of the base-projects component.

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

The process of retrieving keys and values from localStorage in html5

I have stored some important key-value pairs in local storage. Now I need to retrieve both the keys and values, and then display them by appending the values in a list item (li). Currently, my attempt at this looks like: for (var i = 0; i < localStorag ...

How to use vue-axios in Vuex module actions

My Vuex setup currently organizes the store like this: store - modules - common_data - index.js - mutations.js - actions.js - getters.js Within actions.js, there is an action defined as follows: populateTimeZones(context) { ...

Colorbox: Display a specific section from a separate HTML page

Currently, I am facing a challenge where I need to open just one specific part of an external HTML page in a colorbox. I attempted the following approach, however it is opening the entire page instead of just the specified part (at the div with id="conten ...

Calculate the sum of hours worked in a day using pure JavaScript, no external libraries required

Hello, I'm new to this website and please excuse me if my English is not perfect, I am trying my best to communicate :) I have been working on a page that calculates the total hours worked in a day and this is what I have achieved so far until 15/06 ...

Retrieve an HTML element that is a select option with jQuery

I have a select input containing different options as shown below: <select id="myArea"> <option class="myClass_1" style="color:red;" value="1">Area 1</option> <option class="myClass_2" style="color:green;" value="2">Area 2& ...

The generation of the page fails due to the absence of defined data

Every time I try to start my server, the error message pops up saying 'data is not defined', even though I have already defined the data content. export default class App extends Component { data = [ { key: "john", val ...

Experiencing difficulties when attempting to send a cookie to the server

Why is the vue+axios frontend not sending cookies to my php server in the request header? I am currently in the process of migrating an old project to a new server. After making some optimizations to the project architecture, everything worked perfectly f ...

Ways to retrieve the value of a specific key within an object nested within another object

Suppose I have a variable named x with the following structure: x = { choice1: { choice: { name: "choice1", text: "abc", key: "key1" } isChecked: true }, choice2: { choice: { name ...

Vue encountered an invalid value for the dynamic directive argument, which was expected to be a string or null, but

Hello, I am trying to use a dynamic argument for a directive in my HTML code: <div id="app5"> <p>{{message}}</p> <button v-on:[eventName]="reverseMessage">Reverse Message</button> </div> Here is my Vue instance ...

Encountering incorrect JSON formatting even though the content is accurate

I'm encountering an error while trying to fetch the JSON. It seems to be in the wrong format. Below is the JSON data: { "favorite_page_response": "<div class=\"col-md-12 col-lg-12\">\n <div class=\"cart\ ...

Submitting dataURL via Ajax using multipart/form-data

I'm currently working on a program that is responsible for extracting a dataURL from a canvas element and then transmitting it to the server side for conversion back into a JPG file. Now, my next step involves retrieving this image from the server pro ...

Conditionally displaying an input model in Vue.js using v-if

Just starting to learn vue.js and I'm looking to display table data. My idea is that when the table is in display mode, it should only show the data. However, when I click on the edit button of a table row, I want that specific row to switch to edit m ...

Angular - Dividing Functionality into Multiple Modules

I am currently working with two separate modules that have completely different designs. To integrate these modules, I decided to create a new module called "accounts". However, when I include the line import { AppComponent as Account_AppComponent} from &a ...

Top method to create a timer in React/Redux for automatically refreshing authentication tokens

I am implementing an access refresh jwt authentication flow and need the client to automatically send a refresh token after 10 minutes of receiving the access token. I also want to ensure that if the user's device is idle for an hour, a new access tok ...

How to pass the Exact property in React MaterialUI Button with RouterLink Component?

I came across this code snippet: <Button activeClassName={classes.active} className={classes.button} component={RouterLink} exact={true} to="/app/certificates" > Certificates </Button> <Button activeClassName={classe ...

Mistakes within the react-router-dom package

I have been trying to connect MongoDB Realm to React by following a tutorial. Unfortunately, the tutorial is outdated and I encountered errors while trying to run the code. Initially, I received a warning stating that the leaf route does not have an elemen ...

What is the reason for the Pointer Lock API entry displaying a significant number when the window is compressed?

Take a look at these two screenshots that illustrate the issue: The first screenshot demonstrates the correct behavior - the fullscreen mode works perfectly. However, in the second screenshot, a problem arises. Depending on the size of the browser window, ...

AJAX Object Creation: Only Visible After Manual Refresh

Currently, I am in the process of building a basic to-do app that includes multiple different lists, each of which contains a variety of items. My main objective is to integrate AJAX functionality into the creation and display of lists on the lists#index p ...

"Viewed By" aspect of Facebook communities

I'm working on implementing a feature that shows when a post has been seen, similar to Facebook groups, using JS and PHP. I've been able to track the number of times a post has been seen through scrolling actions, but now I want to determine if u ...

Did the menu get shifted downwards on the mobile version by using bootstrap?

Here is the desktop version of a navigation bar. https://i.sstatic.net/e595L.png This image shows the mobile version after clicking on the hamburger button. https://i.sstatic.net/ng1tK.png I would like the menu to open when I click on the hamburger, bu ...