Why Vue 3 ref is not updating

Question

I have searched this issue and tried all the things but did not work for me. I am using Vue 3 ref and it needs to be updated after calling the Axios with the response but it is not getting updated here is some piece of code.

Here invite_link is an object

const props = defineProps({
   'workplace': Object 
  });

// Also tried const workplace = props.workplace;

const workplace = ref(props.workplace);
axios.post(url).then(res=>{
  workplace.value.invite_link = res.data.workplace.invite_link
});

and in the template I am using v-show="workplace.invite_link" that needs to be shown after Axios ran successfully. I have also check Vue devtools and it still shows the old workplace object

Please, provide stackoverflow.com/help/mcve for your problem. The problem is specific to the parts that you omitted. It generally shouldn't be done the way you did it, the restriction on prop mutation is there for a reason, vuejs.org/guide/components/props.html#one-way-data-flow — Estus Flask
– Estus Flask, Commented Oct 7, 2023 at 13:42

Michal Šindelář · Accepted Answer · 2023-10-08 05:55:25Z

4

const workplace = ref(props.workplace);

It is important to understand that setup is executed only once in component lifecycle. The code above creates a ref and INITIALISE it with the current value of props.workplace. The value of such ref will never ever change.

If you want to create a ref which value will update whenever props.workplace updates (which is almost always what you want), do this:

const { workplace } = toRefs(props);

or

const workplace = toRef(props, 'workplace');

Docs

answered Oct 8, 2023 at 5:55

Michal Šindelář

38.7k8 gold badges83 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bilal Maqsood Over a year ago

I have already tired toRef but when I tried to change the value of workplace after axios it does not update

Collectives™ on Stack Overflow

Why Vue 3 ref is not updating

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related