0

我在我的单个文件组件中使用Vue Multiselect库并执行 GET 请求来填充 Multiselect 元素。当用户从列表中选择一个项目时，我需要将他带到一个新页面。多选中的事件处理程序会将 附加NAS_ID到页面 URL，就好像他在页面中选择了一个链接一样。

在我的本地测试期间，它运行良好。但是，在我将代码部署到远程服务器后，页面不会重定向用户。我可以在浏览器窗口中看到 URL 会更改，但浏览器不会像我在本地测试中那样重新加载。因此，我必须自己手动重新加载浏览器才能使其正常工作。

任何人都知道我可以做些什么来修复它以自动加载页面？

这是我的设置：

apiService.getAll()抓取这样的数据：

    [
  {
    "NAS_ID": 100010,
    "Name": "Aeration Basin",
    "Geometry Extracted": "S"
  },
  {
    "NAS_ID": 100202,
    "Name": "Aerial Farm",
    "Geometry Extracted": "P, S"
  }
]

组件TopicJump.vue：

<template>
  <multiselect 
    v-model='value' 
    :options='topics' 
    :loading='isLoading' 
    :selectLabel='selectLabel' 
    track-by='NAS_ID' 
    label='Name' 
    placeholder='Select or Search for a Topic' 
    class='multiselect' 
    @select='goToLink'> <--- HERE IS THE SELECT HANDLER
    <template slot='singleLabel' slot-scope='{ option }'>
      <strong>Jumping to {{ option.Name }}</strong>
    </template>
  </multiselect>
</template>

<script>
import Multiselect from "vue-multiselect";
import axios from "axios";
import apiService from "@/apiService.js";

export default {
  name: "TopicJump",
  components: { Multiselect },
  data() {
    return {
      value: null,
      topics: [],
      isLoading: true,
      selectLabel: ""
    };
  },
  created() {
    this.getTopics();
  },
  methods: {
    getTopics() {
      apiService
        .getAll()
        .then(response => {
          this.isLoading = false;
          this.topics = response.data;
        });
    },
    goToLink(option) {
      window.location.href =
        "https://example.com/#/content/" + `${option.NAS_ID}`;
    }
  }
};
</script>
4

1 回答 1

0

原来我需要向路由器视图组件添加一个键。

于 2019-02-12T22:22:54.567 回答