挂载()之后是否可以将数组作为道具传递？

Question

我有一个应用程序使用VueJS + Vuetify + Spring。我正在从服务器获得一个旅行列表，我想在导航抽屉中显示名称列表。我创建了一个travelList数组，并希望在drawerElements将其作为支柱传递给导航抽屉之前获取这个旅行列表。

有可能吗？我当前的代码不起作用--可能我做错了什么，也许还有另外一种更好、更正确的方法。

<template>
  <v-app>
    <app-bar/>
    <navigation-drawer :links="drawerElements"/>
    <v-main>
      <router-view></router-view>
    </v-main>
  </v-app>
</template>

<script>
import AppBar from "@/views/components/AppBar";
import NavigationDrawer from "@/views/components/NavigationDrawer";
import TravelService from "@/services/travel.service";

export default {
  name: "Home",
  components: {AppBar, NavigationDrawer},
  data() {
    return {
      travelList: [],
      drawerElements: [
        {
          to: '/menu/home',
          icon: 'mdi-view-dashboard',
          text: 'Home',
        },
        {
          icon: 'mdi-book-multiple',
          text: 'Travels',
          subLinks: this.travelList,
        }
      ]
    }
  },
  computed: {
    currentUser() {
      return this.$store.state.auth.user;
    }
  },
  mounted() {
    if (!this.currentUser) {
      this.$router.push('/login');
    }
    this.getTravelList();

  },
  methods: {
    getTravelList() {
      TravelService.getLoggedUserTravels().then(
          response => {
            this.convertTravelToDrawerElements(response.data);
          }
      )
    },
    convertTravelToDrawerElements(response) {
      let travels = [];
      response.forEach(element => {
        let travel = {};
        travel.text = element.name;
        travel.to = '/trip/' + element.id;
        travel.icon = "mdi-menu-right";
        travels.push(travel);
      })
      this.travelList = travels;
    }
  },
}
</script>
<style>

</style>

Answer 1

你有两个选择

1. 在您的convertTravelToDrawerElements方法中，push每个都直接将travel创建为this.travelList，而不是用新的数组替换它。
2. 将drawerElements从data转换为计算属性

computed: {
  getDrawerElements() {
    return [
        {
          to: '/menu/home',
          icon: 'mdi-view-dashboard',
          text: 'Home',
        },
        {
          icon: 'mdi-book-multiple',
          text: 'Travels',
          subLinks: this.travelList,
        }
      ]
  }
}

<template>
  <v-app>
    <app-bar/>
    <navigation-drawer :links="getDrawerElements"/>
    <v-main>
      <router-view></router-view>
    </v-main>
  </v-app>
</template>

原因

...your代码不能像预期的那样工作，因为data()函数在创建组件时只调用一次。当时，this.travelList是空数组。这个空数组(或者更好地说是对数组的引用)分配给data()函数创建和返回的新对象的subLinks属性。当您稍后用一个新数组替换this.travelList时，操作对subLinks属性的内容没有任何影响，它仍然包含对前一个(完全为空)数组的引用.