Vue 向其他组件发送数据是落后了一步

Question

对不起，我的英语不好，这不是我的主要语言，也对不起标记！

您好，我正在尝试将数据从我的父组件发送到子组件。这背后的想法是，我可以为每个组件使用特定的颜色。此颜色在 routers 数组的父组件中声明。但是发送给组件的数据是来自前一个，所以它发送到之前存储在 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

我修改了你的代码，所以我可以制作一个运行的 sn-p。 我发现单击“橙色”条会更新颜色，但在单击另一种颜色之前，边框颜色不会显示。我看到你构建的边框颜色字符串在“color”之后没有空格，所以当它构建带有“orange”的字符串时，它将是3px solidorange，这不起作用。其他颜色没问题，因为3px solid#F9BE02 解析。

所以我认为你的问题只是在“颜色”之后放置一个空格。

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>