Vue sending data to other components is one step behind - vue.js

Question

Sorry for my bad english this isn't my main language, also sorry for the markup!!
Hi im trying to send data from my parent component to the child components. The idea behind this, is so that i can use a specifik color for every component. This color is declared in the parent component in the routers array. But the data sended to the component was from the previous one, so it sends to color which was previously stored in routerColor.
<template>
<div class="flex" id="app">
<quick-acces>
</quick-acces>
<nav>
<router-link v-for="(router, index) in routers" class="nav-item" :to="{name:router.name, params: {routerColor}}" :style="{background: router.color}" #click.native="changeBorderColor(router.color)" v-bind:key="index">{{router.label}}</router-link>
</nav>
<main :style="{border: currentBorder}">
<router-view class="router-view">
</router-view>
</main>
</div>
</template>
<script>
export default {
name: 'home',
data () {
return {
routers: [
{
name: 'ToDo',
link: '/to-do-list',
label: "To do list",
color: "#F9BE02"
},
{
name: 'Daily',
link: '/dailyplanner',
label: "Daily Planner",
color: "#F53240"
},
{
name: 'Projects',
link: '/projects',
label: "Projects",
color: "#02C8A7"
},
{
name: 'Steps',
link: '/function-steps',
label: "Steps",
color: "#2E302C"
},
{
name: 'Timer',
link: '/timer',
label: "Timer",
color: "#8FC33A"
},
{
name: 'Test',
link: '/test',
label: "Test",
color: "orange"
}
],
routerColor: "",
openTab: this.routers,
currentBorder: ""
}
},
methods: {
changeBorderColor: function(color){
this.routerColor = color
console.log(this.routerColor)
this.currentBorder = "3px solid" + color
},

Answer 1

I modified your code so I could make a snippet that runs.
I found that clicking the "orange" strip would update the color, but the border color did not show up until you clicked another color. I saw that you build the border color string without a space after "color", so when it built the string with "orange", it would be 3px solidorange, which does not work. Other colors were ok, because 3px solid#F9BE02 parses.
So I think your problem is just putting in a space after "color".
new Vue({
el: '#app',
data() {
return {
routers: [{
name: 'ToDo',
link: '/to-do-list',
label: "To do list",
color: "#F9BE02"
},
{
name: 'Daily',
link: '/dailyplanner',
label: "Daily Planner",
color: "#F53240"
},
{
name: 'Projects',
link: '/projects',
label: "Projects",
color: "#02C8A7"
},
{
name: 'Steps',
link: '/function-steps',
label: "Steps",
color: "#2E302C"
},
{
name: 'Timer',
link: '/timer',
label: "Timer",
color: "#8FC33A"
},
{
name: 'Test',
link: '/test',
label: "Test",
color: "orange"
}
],
routerColor: "",
openTab: this.routers,
currentBorder: ""
}
},
methods: {
changeBorderColor: function(color) {
this.routerColor = color
// I added a space after "solid"
this.currentBorder = "3px solid " + color
}
},
components: {
routerLink: {
props: {
to: Object
},
template: '<div>X{{to.params.routerColor}}</div>'
},
routerView: {
template: '<div>V</div>'
}
}
});
<script src="https://unpkg.com/vue#latest/dist/vue.js"></script>
<div class="flex" id="app">
<router-link v-for="(router, index) in routers" class="nav-item" :to="{name:router.name, params: {routerColor}}" :style="{background: router.color}" #click.native="changeBorderColor(router.color)" v-bind:key="index">{{router.label}}</router-link>
<main :style="{border: currentBorder}">
<router-view class="router-view">
</router-view>
</main>
</div>