как организовать роутинг

268

16 декабря 2017, 08:42

Делаю роутинг и мне нужно что бы по клику на кнопку "Next Day" выводило погоду на следующий день

<template> 
  <div class="day"> 
    <h1>Details!</h1> 
    <p>Date: {{$route.params.date}}</p> 
    <p>Moonrise: {{$route.params.weather.astronomy[0].moonrise}}</p> 
    <p>Moonset: {{$route.params.weather.astronomy[0].moonset}}</p> 
    <p>Sunrise: {{$route.params.weather.astronomy[0].sunrise}}</p> 
    <p>Sunset: {{$route.params.weather.astronomy[0].sunset}}</p> 
    <p>Min Temperature today C: {{$route.params.weather.mintempC}}</p> 
    <p>Max Temperature today C: {{$route.params.weather.maxtempC}}</p> 
    <p>Min Temperature today F: {{$route.params.weather.mintempF}}</p> 
    <p>Max Temperature today F: {{$route.params.weather.maxtempF}}</p> 
    <router-link to="/"><md-button class="md-raised md-primary">Back to Home</md-button></router-link> 
    <md-button class="md-raised md-primary" @click="nextDay($route.params.date)">Next Day</md-button> 
  </div> 
</template> 
<script> 
import { mapState } from 'vuex' 
 
export default { 
  name: 'DayWeatherInfo', 
  date(){ 
    return{} 
  }, 
  computed: { 
    ...mapState(['cityInformation']) 
  }, 
  watch: { 
    '$route' (to, from){ 
      this.$route.params.date = to.params.date 
    } 
  }, 
  methods: { 
    nextDay (thisDay) { 
      let day = new Date(thisDay) 
      console.log(day.getDate()+1) 
    } 
  } 
} 
</script>

Answer 1

Можно попробовать сделать на кнопку Next Day тем же <router-link>, но с новым значением даты:

<template>
...
    <router-link to="/"><md-button class="md-raised md-primary">Back to Home</md-button></router-link>
    <router-link :to="nextDayRoute"><md-button class="md-raised md-primary">Next Day</md-button></router-link>
  </div>
</template>

И добавить вычисляемое свойство для пути на следующий день:

  computed: {
    ...mapState(['cityInformation']),
    nextDayRoute() {
      let nextDay = new Date(thisDay)
      nextDay.setDate(nextDay.getDate()+1)
      return {name: '', params: {...this.$route.params, date = nextDay}}
    }
  },