Как перенаправить несколько раз после отправки формы с помощью Vue.js - PullRequest
Новая
       4

Как перенаправить несколько раз после отправки формы с помощью Vue.js

0 голосов
/ 29 марта 2019

Я пытаюсь показать результат запроса фильма.

Когда я отправляю свою форму, меня правильно перенаправляют на страницу с результатом. Проблема в том, что если я ввожу название нового фильма и отправляю снова, я больше не буду перенаправлен (поэтому не вижу новый результат). Я должен обновить браузер, чтобы увидеть результат.

Мой дом vue. 

<template>
  <form class="form-inline my-2 my-lg-0" v-on:submit.prevent="submit()">
    <input
      class="form-control mr-sm-2"
      type="search"
      v-model="query"
      autofocus
      placeholder="Enter a movie title"
      aria-label="Search"
     />
     <button class="btn btn-outline-success my-2 my-sm-0" type="submit">
              Search
            </button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      query: ""
    };
  },
  methods: {
    submit() {
      console.log('clicked')
      this.$router.push({ name: "search-movies", query: { q: this.query } });
    }
  }
};
</script>

My Search vue (страница результатов) 

<template>
  <div>
    <h1>Search</h1>
    <div class="row">
      <MovieListItem v-for="movie in movies" :key="movie.id" :movie="movie" />
    </div>
  </div>
</template>

<script>
import MOTService from "@/services/MOTService.js";
import MovieListItem from "@/components/MovieListItem.vue";

export default {
  components: {
    MovieListItem
  },
  data() {
    return {
      movies: [],
      meta: {},
    };
  },
  methods: {
    searchMovies() {
      MOTService.searchMovies(this.$route.query)
        .then(response => {
          this.movies = response.data["data"];
          this.meta = response.data["meta"];
        })
        .catch(error => {
          console.log("There was an error:", error.response);
        });
    }
  },
  created() {
    this.searchMovies();
  }
};
</script>

Мой router.js 

...
{
  path: "/search",
  name: "search-movies",
  component: Search,
}

Ответы [ 2 ]

0 голосов
/ 30 марта 2019

Вы можете попытаться добавить наблюдателя на $route.query и перезапускать поиск при каждом изменении запроса: 

methods: {
  searchMovies(query) {
    MOTService.searchMovies(query)
      //...
    });
  }
},
created() {
  this.searchMovies(this.$route.query);
},
watch: {
  '$route.query'(value) {
    this.searchMovies(value)
  }
}
0 голосов
/ 30 марта 2019

Как сказал Крис, если я уже на маршруте search-movies, я не делаю новый запрос, поэтому не могу обновить результат.Мое более простое решение - добавить this.$router.go(0); к функции submit(). 

...
methods: {
    submit() {
      this.$router.replace({ name: "search-movies", query: { q: this.query } });
      this.$router.go(0);
    }
  }
...