Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Component not updating after mutation #1621

Closed
mjmnagy opened this issue Sep 27, 2019 · 1 comment

Comments

@mjmnagy
Copy link

@mjmnagy mjmnagy commented Sep 27, 2019

I have the following component and i cannot figure out why the computed property of details is not updating when the fetch() method is being called

	<template>
	  <div>
		{{ haveData }} //remains undefined
	  </div>
	</template>

	<script>
	export default {
	  props: {
		group: {
		  type: Object,
		  required: true
		},
	  },
	  computed: {
		currentGroup() {
		  return this.$store.getters['user/navbar_menu_app_current_group'](
			this.group.id
		  )
		  
		  /*-- which is the following function 
			 navbar_menu_app_current_group: state => item => {
				return state.menu.find(m => {
				  return m.id == item
				})
			  }
		  */
		  
		  /*-- this function returns an object like so 
			  {
				id: 1,
				label: 'kity cats',
			  }
			  ***details --> IS NOT DEFINED. if i add it to the current group as null my problem goes away however this is a previous api call which does not set the "details" parameter
		  */
		},
		details() {
		  let c = this.currentGroup.details
		  console.log(c) // returns undefined which makes sense but it should be updated after this.fetch() is called
		  return c
		},
		haveData() {
		  return this.details != null
		}
	  },
	  methods: {
		async fetch() {
		  await this.$store.dispatch(
			'user/navbar_menu_app_details_get',
			this.group.id
		  )
		  //this is setting the "details" part of the state on menu which is referred to in the computed properties above
		  //Previous to this there is no state "this.group.details"
          //If i add a console log to the mutation the action calls i get what is expected
		}
	  },
	  created() {
		if (!this.haveData) {
		  this.fetch()
		}
	  }
	}
	</script>

it seems if i change the array listing to include detail it works

original

    [
	  {
			id: 1,
			label: 'kity cats',
	  }
     ....
    ]

to

	  {
			id: 1,
			label: 'kity cats',
            details: null
	  }

I do not get this problem

The unfortunate part is that the array is created from a large api call and adding the details seems like unnecessary as it may never be needed

How can i get the computed properties to work without adding the details:null to the default state?

thanks

@vue-bot

This comment has been minimized.

Copy link

@vue-bot vue-bot commented Sep 27, 2019

Hello, thank you for taking time filling this issue!

However, we kindly ask you to use our Issue Helper when creating new issues, in order to ensure every issue provides the necessary information for us to investigate. This explains why your issue has been automatically closed by me (your robot friend!).

I hope to see your helper-created issue very soon!

@vue-bot vue-bot closed this Sep 27, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.