[Vuejs]-Vue sending data to other components is one step behind

by

0đź‘Ť

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>

Leave a comment