Vuex и Django Datepicker - PullRequest
Новая
       13

Vuex и Django Datepicker

0 голосов
/ 15 апреля 2020

Я новичок в Vuex и Vue в целом. В настоящее время я застрял там, где мне нужно отфильтровать данные по определенным датам. Я уже реализовал все логи c в Django, единственная проблема заключается в том, что, когда я выбираю диапазоны дат, я не могу передать параметры в URL и просмотреть на бэкэнде. Может быть, какой-то код поможет, 

<template>
  <div>
    <NavBar></NavBar>
    <div class="grid-container">
      <div class="grid-x">
        <div class="cell medium-12">
          <div class="callout large">
            <h5>This is a large callout</h5>
            <p>It has an easy to override visual style, and is appropriately subdued.</p>
            <a href="#">It's dangerous to go alone, take this.</a>
          </div>
        </div>
      </div>

      <div class="grid-x">
        <div class="cell medium-6">
          <form v-on:submit.prevent="weeklyData">
            <date-picker v-model="start_date" value-type="format" format="YYYY-MM-DD"></date-picker>
            <date-picker v-model="end_date" value-type="format" format="YYYY-MM-DD"></date-picker>
            <button class="button" type="submit">Filter</button>
          </form>
        </div>
        <div class="cell medium-6">

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import DatePicker from 'vue2-datepicker';
import 'vue2-datepicker/index.css';
import NavBar from '../components/Navbar'
import { mapState } from 'vuex'

export default {
  name: 'weekly',
  onIdle () { // dispatch logoutUser if no activity detected
      this.$store.dispatch('logoutUser')
        .then(response => {
          this.$router.push('/login')
        })
    },
  components: {
    NavBar,
    DatePicker
  },
  data () {
    return {
      start_date: '',
      end_date: '',
      fil_comm: []
    }
  },
  methods: {
    weeklyData () {
      this.$store.dispatch('weeklyData', {
        start_date: this.start_date,
        end_date: this.end_date
      })
    }
  },
  computed: mapState(['Weekly']),
  mounted () {
    this.$store.dispatch('weeklyData', { fil_comm: this.fil_comm })
  },
}
</script>

В настоящее время мой URL выглядит так на бэкэнде 

urlpatterns = [
    path('weekly/', views.weekly_view, name='weekly_view'),
]

и мой взгляд как таковой 

def weekly_view(request):
    if request.method == 'POST':
        start_date = request.POST.get('start_date')
        end_date = request.POST.get('end_date')

        print(start_date)

        res = WeeklyCommission()
        res_db = res.getWeekly(start_date, end_date)

        print(res_db)

Я пытался сделать URL-адрес и просмотр как можно более простым, чтобы не отнимать у меня борьбу с Vuex. Опять же, я не спрашиваю ответа только о том, как настроить мой Store.js для принятия дат и как передать даты на мой взгляд. Я мог бы быть абсолютно неправ в реализации, но любая помощь будет с благодарностью оценена.

...