Question

我关注了这篇博客文章：Dynamic Vue.js Layout Components，以使用动态组件来构建一些布局。

我现在将侧面导航栏放入布局中以更新路由器视图。导航正常运行时，我无法显示活动链接的修改样式。如果将组件导入到布局外部的主页中，该组件将按预期工作。我猜这是因为在这里每次路线更改都会重新安装它。但是在布局上，没有任何变化。我认为这是因为路线更改时布局不会重新呈现。我尝试使用vm。$ forceUpdate没有成功，所以我正在寻找一种正确的方法来使组件在单击后重新安装（如果这确实是问题的根源）

更新：我已经设法在codeandbox中显示了它，以使其更易于理解：codesandbox.io/s/mqwl3jlvx8

我的代码如下： App.vue：

<template>
 <div id="app">
  <v-app>
    <component :is="layout">
      <router-view :layout.sync="layout"/>
    </component>>
  </v-app>   
  </div>
</template>
<script>

export default {
  name: 'App',
  data() {
    return {
      layout: 'div',
    };
  },
}
</script>

LayoutFile：

<template>
  <div class="LayoutDefault">

        <div class="box">

            <div class="wrapper">
            <SideNav class="sidenav" />
            <slot class="main"/>
            </div>
        </div> 

  </div>
</template>

<script>
import SideNav from '@/components/crmSideNav.vue'

export default {
  name: "LayoutDefault",
  components: { SideNav, }

};
</script>

然后，SideNav组件为多个NavItem组件提供了一个v-for，并将数据作为道具传递。在NavItem组件中，我具有以下方法：

goTo(){
            this.myIconColor = this.iconColor
            this.myTextColor = this.textColor
            this.$router.push({ path: this.path })
        }


    },
mounted(){

      if(this.$route.path === this.path) { 

          this.myIconColor = this.highlightColor
          this.myTextColor = this.highlightColor
          this.myBackgroundColor = 'rgba(0,0,0,0.1)'

        }
    }

Answer 1

在未触发的情况下，我通过在父项与NavItem子项之间交换事件来解决此问题。由于子级处于v-for循环中，因此我需要设置并传递索引以及ref才能正确触发事件。现在，在路线更改时，发射链接获得活动样式，其他子节点将其设置为“中性”。

working example

SideNav父级现在看起来像这样：

    <template>
<div class="main">

      <SideNavItem v-for="(link,index) in links" 
                  :key="link.id"
                  :path="link.path"
                  :text="link.text"
                  :index="index"
                 ref="setStyle"
                  @clicked="updateStyle"  />

</div>
</template>

<script>
import SideNavItem from "./SideNavItem.vue";

export default {
  components: {
    SideNavItem
  },
  data() {
    return {
      links: [
        { id: 1, text: "GoTo Page1", path: "/" },
        { id: 2, text: "GoTo Page2", path: "/page2" },
        { id: 3, text: "GoTo Page3", path: "/page3" }
      ]
    };
  },
  methods: {
    updateStyle( index) { 

        var i;
        for (i = 0; i < this.links.length; i++) { 
           this.$refs.setStyle[i].changeStyle( index);
        }

      },
  }
};
</script>

还有子级NavItem：

    <template>

  <div class="link1" @click="changePage" :style="{ backgroundColor: 
  setBackground, color:setColor }">
  {{ text }}
  </div>

</template>
<script>
export default {
  props: {
    path: { type: String },
    text: { type: String },
    index: { type: Number},
  },
  data() {
    return {
      myBackgroundColor: "",
      myColor: ""
    };
  },
  computed: {
    setBackground() {
      return this.myBackgroundColor;
    },
    setColor() {
      return this.myColor;
    }
  },
  methods: {
       changePage(){

            this.$emit('clicked',this.index)

            this.$router.push({ path: this.path })
        }, 
        changeStyle(index) {

            if (this.index === index) {
            this.myBackgroundColor = "blue";
            this.myColor = "white";
            }
            else  {
             this.myBackgroundColor = "";
            this.myColor = "";
            }

        },
  },

};
</script>

VueJS布局中的组件不会更新

1 个答案: