计算属性的副作用和更改后的更新

Question

我有一个想要更新的页面，方法是使用导航抽屉转到我从 API 查询的不同组并将该信息写入数据表。我在 returnurl 计算机属性中不断受到意想不到的副作用。我不确定我能做些什么来解决这个问题。此外，我正在尝试在 groupName 更改后再次加载页面，但到目前为止我也没有成功。

谢谢

GroupList.vue

<template>
  <div class="grouplist">
    <v-card-title>
      Swipe Report {{groupName}}
      <v-spacer></v-spacer>
      <v-text-field
        v-model="search"
        append-icon="mdi-magnify"
        label="Search"
        single-line
        hide-details
      ></v-text-field>
    </v-card-title>
    <v-data-table
      :headers="headers"
      :items="swipedata"
      :items-per-page="100"
      :search="search"
      loading
      loading-text="Loading... Please wait"
    ></v-data-table>
    <p></p>
  </div>
</template>

<script>
// @ is an alias to /src
import axios from "axios";

export default {
  name: "GroupList",
  data() {
    return {
      search: "",
      headers: [
        {
          text: "First Name",
          value: "firstname"
        },
        {
          text: "Las Name",
          value: "lastname"
        },
        {
          text: "Reader Location",
          value: "readerdesc"
        },
        {
          text: "Card Number",
          value: "cardnum"
        },
        {
          text: "Event Time",
          value: "eventtime"
        }
      ],
      groupName: this.$route.params.group,
      swipedata: []
    };
  },
  mounted() {
    this.init();
  },
  computed: {
    returnurl() {
      return (this.returnurl =
        "http://localhost:5000/" + this.$route.params.group);
    }
  },
  methods: {
    init() {
      axios
        .get(this.returnurl)
        .then(response => (this.swipedata = response.data));
    }
  },
  components: {}
};
</script>

路线：

 {
    path: "/groups/:group",
    component: GroupList,
  },

链接格式如下： http://localhost:5000/groups/Action http://localhost:5000/groups/Salary http://localhost:5000/groups/Hourly

在每个链接上刷新 GroupList 视图，因为它不是来自链接。我必须手动刷新页面。

Answer 1

您计算的“returnurl”格式错误。

计算值将是您在其中返回的任何值，您不应该在函数内部设置它，就像您对“returnurl = '...'”所做的那样。

您的计算结果应如下所示：

returnurl(){
  return `http://localhost:5000/${this.$route.params.group}`;
}

接下来，您希望能够单击链接，更改 url，然后重新运行您的生命周期挂钩。

当前发生的事情是 Vue 的预期行为，它尝试重用相同的组件，期望您更新数据。

重新运行生命周期挂钩的简单解决方案： 将“key”属性添加到您的路由器视图中，如下所示：

<router-view :key="$route.fullPath">

这样，每当您的 url 发生任何变化时，键都会发生变化，并且应该会触发组件的重新创建。

你可以看到一个例子，由 LinusBorg HERE 制作

这种解决方案在某些情况下可能有点过于极端，因为这会触发路由器视图中所有组件的重新创建，这在更大的应用程序中可能会很糟糕。

另一种解决方案是在 $route 中添加一个观察者，并在其中调用您的 init 函数，以及您可能想要进行的其他更改。

这是来自official vue-router docs的解释