Why Vue .sync command not working in router view?

Question

I'm trying to sync a variable between components using the .sync command in Vue. It works without problems when I put components in the page using the tag (for example: <my-component></my-component>). When I bind it in a <router-view>, it works only one-way. Is it normal?

When I click on the link inside the component, it does not change the value of test in the root Vue object. When I change it in the root object, the component inherits the value correctly.

Click here for an example

Could you elaborate on "works only one-way"? Besides, if you check in the console, Vue actually warns you to avoid mutating a prop directly. — Yom T.
– Yom T., Commented May 19, 2020 at 17:29

tony19 · Accepted Answer · 2022-07-15 23:35:33Z

2

You are trying to update the prop directly, the correcto way to update it is to emit an update. Remember :test.sync is a shorthand to v-bind:test and v-on:update:test

On your Foo component:

editTest: function() {     
  this.$emit('update:test', false)  // instead of this.test = false;        
}

Fiddle: https://jsfiddle.net/hansfelix50/u7k5qpwz/

edited Jul 15, 2022 at 23:35

tony19

140k23 gold badges281 silver badges354 bronze badges

answered May 19, 2020 at 17:30

Hans Felix Ramos

4,4543 gold badges19 silver badges45 bronze badges

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

2 Comments

Alessio Palmero Aprosio Over a year ago

I tried, but it does not work: jsfiddle.net/o8r9nzv5/10

Hans Felix Ramos Over a year ago

You need to write on your Foo component (child). I put a js fiddle on my answer

Collectives™ on Stack Overflow

Why Vue .sync command not working in router view?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related