通过Vuex Store将JSON值传递给另一个模板

时间：2018-12-24 00:23:47

标签： javascript vue.js

我有2个模板文件（单独的.vue文件），我们称一个 driverStatus 和另一个 listViolations 。第一个模板 driverStatus 很简单，它检索JSON输出并将其打印到模板中，除了名为driver_id的组件（此输出的示例） 

{"driver_id":1,"driver_name":"{driver_first_name}, {driver_last_name}","driver_truck":"13","driver_trailer":"83","driver_status":"driving","has_violations":false},
{"driver_id":2,"driver_name":"{driver_first_name}, {driver_last_name}","driver_truck":"58","driver_trailer":"37","driver_status":"sleeping","has_violations":true},
{"driver_id":3,"driver_name":"{driver_first_name}, {driver_last_name}","driver_truck":"80","driver_trailer":"27","driver_status":"driving","has_violations":true},

我有一个按钮，当has_violations等于true时，该按钮有条件地显示在 driverStatus 上。此按钮将是指向 listViolations 模板（vue文件）的路由器链接。然后，此模板将采用 driverStatus 提供的driver_id，并向后端发送所有违反driver_id的请求，然后将这些违反打印到表中。

我的问题是我该如何正确地做到这一点？

这就是我希望每个模板文件完成的事情

driverStatus

  1. 发送对allViolations JSON的请求
  2. 检索JSON
  3. 打印JSON结果
  4. 有条件地呈现“查看违规”按钮
  5. 将driver_id插入该按钮的路由器链接

listViolations

  1. 发送关于已通过的driver_id的其他信息的请求
  2. 检索JSON文件
  3. 打印结果

但是我在做什么错了？

这是我的尝试：

driverStatus： 

<template>
  <b-container fluid>

    <!--Search Controls-->
    <b-row>
      <b-col md="6" class="my-1">
        <b-form-group horizontal label="Filter" class="mb-0">
          <b-input-group>
            <b-form-input v-model="filter" placeholder="Type to Search" />
            <b-input-group-append>
              <b-btn :disabled="!filter" @click="filter = ''">Clear</b-btn>
            </b-input-group-append>
          </b-input-group>
        </b-form-group>
      </b-col>
      <b-col md="6" class="my-1">
        <b-form-group horizontal label="Sort" class="mb-0">
          <b-input-group>
            <b-form-select v-model="sortBy" :options="sortOptions">
              <option slot="first" :value="null">-- none --</option>
            </b-form-select>
            <b-form-select :disabled="!sortBy" v-model="sortDesc" slot="append">
              <option :value="false">Asc</option>
              <option :value="true">Desc</option>
            </b-form-select>
          </b-input-group>
        </b-form-group>
      </b-col>
      <b-col md="6" class="my-1">
        <b-form-group horizontal label="Sort direction" class="mb-0">
          <b-input-group>
            <b-form-select v-model="sortDirection" slot="append">
              <option value="asc">Asc</option>
              <option value="desc">Desc</option>
              <option value="last">Last</option>
            </b-form-select>
          </b-input-group>
        </b-form-group>
      </b-col>
      <b-col md="6" class="my-1">
        <b-form-group horizontal label="Per page" class="mb-0">
          <b-form-select :options="pageOptions" v-model="perPage" />
        </b-form-group>
      </b-col>
    </b-row>
    <!--Search Controls-->

    <!-- Main table element -->
    <b-table show-empty
             stacked="md"
             :items="items"
             :fields="fields"
             :current-page="currentPage"
             :per-page="perPage"
             :filter="filter"
             :sort-by.sync="sortBy"
             :sort-desc.sync="sortDesc"
             :sort-direction="sortDirection"
             @filtered="onFiltered"
    >
      <template slot="driverName" slot-scope="row">{{row.value.driver_first_name}} {{row.value.driver_last_name}}</template>
      <template slot="truckNumber" slot-scope="row">{{row.value.driver_truck}}</template>
      <template slot="truckNumber" slot-scope="row">{{row.value.driver_trailer}}</template>
      <template slot="status" slot-scope="row">{{row.value.driver_status}}</template>
      <template slot="violations" slot-scope="row">{{row.value?'Yes':'No'}}</template>
      <!-- Render router link and button -->
      <router-link :to="{ name: 'places', params: {driverID: driver_id } }">
      <template slot="actions" slot-scope="row">
        <b-button v-if="row.value.list_of_violations == true" id="account_list">View Violations</b-button>
      </template>
      </router-link>

    </b-table>

    <b-row>
      <b-col md="6" class="my-1">
        <b-pagination :total-rows="totalRows" :per-page="perPage" v-model="currentPage" class="my-0" />
      </b-col>
    </b-row>

  </b-container>
</template>

<script>

export default {
  data () {
    return {
      items: items,
      fields: [
        { key: 'driver_name', label: 'Driver Name', sortable: true, sortDirection: 'desc' },
        { key: 'truck_number', label: 'Truck Number', sortable: true, 'class': 'text-center' },
        { key: 'trailer_number', label: 'Trailer Number', sortable: true, 'class': 'text-center' },
        { key: 'has_violations', label: 'Violations' },
        { key: 'driver_status', label: 'Status' },
        { key: 'actions', label: 'Actions' }
      ],
      currentPage: 1,
      perPage: 5,
      totalRows: items.length,
      pageOptions: [ 5, 10, 15 ],
      sortBy: null,
      sortDesc: false,
      sortDirection: 'asc',
      filter: null,
    }
  },
  },
  computed: {
    sortOptions () {
      return this.fields
        .filter(f => f.sortable)
        .map(f => { return { text: f.label, value: f.key } })
    }
  },
  methods: {
    onFiltered (filteredItems) {
      // Trigger pagination to update the number of buttons/pages due to filtering
      this.totalRows = filteredItems.length
      this.currentPage = 1
    }
    //Get Driver Status
    getDriverStatus: function () {
      const url = 'driver_status_data.json'
        axios.get(url, {
          dataType: 'json',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
          },
          mode: 'no-cors',
          credentials: 'include'
        })
        .then(function (response) {
          console.log(JSON.stringify(response.data))
          this.courses = JSON.stringify(response.data)
        })
        .catch(function (error) {
          console.log(error)
        })
      }
  }
}
</script>

list违规： 

<template>
  <b-container fluid>

    <!--Search Controls-->
    <b-row>
      <b-col md="6" class="my-1">
        <b-form-group horizontal label="Filter" class="mb-0">
          <b-input-group>
            <b-form-input v-model="filter" placeholder="Type to Search" />
            <b-input-group-append>
              <b-btn :disabled="!filter" @click="filter = ''">Clear</b-btn>
            </b-input-group-append>
          </b-input-group>
        </b-form-group>
      </b-col>
      <b-col md="6" class="my-1">
        <b-form-group horizontal label="Sort" class="mb-0">
          <b-input-group>
            <b-form-select v-model="sortBy" :options="sortOptions">
              <option slot="first" :value="null">-- none --</option>
            </b-form-select>
            <b-form-select :disabled="!sortBy" v-model="sortDesc" slot="append">
              <option :value="false">Asc</option>
              <option :value="true">Desc</option>
            </b-form-select>
          </b-input-group>
        </b-form-group>
      </b-col>
      <b-col md="6" class="my-1">
        <b-form-group horizontal label="Sort direction" class="mb-0">
          <b-input-group>
            <b-form-select v-model="sortDirection" slot="append">
              <option value="asc">Asc</option>
              <option value="desc">Desc</option>
              <option value="last">Last</option>
            </b-form-select>
          </b-input-group>
        </b-form-group>
      </b-col>
      <b-col md="6" class="my-1">
        <b-form-group horizontal label="Per page" class="mb-0">
          <b-form-select :options="pageOptions" v-model="perPage" />
        </b-form-group>
      </b-col>
    </b-row>
    <!--Search Controls-->

    <!-- Main table element -->
    <b-table show-empty
             stacked="md"
             :items="items"
             :fields="fields"
             :current-page="currentPage"
             :per-page="perPage"
             :filter="filter"
             :sort-by.sync="sortBy"
             :sort-desc.sync="sortDesc"
             :sort-direction="sortDirection"
             @filtered="onFiltered"
    >
      <template slot="truck_number" slot-scope="row">{{row.value.driver_truck}}</template>
      <template slot="trailer_number" slot-scope="row">{{row.value.driver_trailer}}</template>
      <template slot="violation_date" slot-scope="row">{{row.value.violation_date}}</template>
      <!-- View Specific Violation -->
      <template slot="actions" slot-scope="row">
        <b-button @click="getSpecificViolation(logbook_id)" id="view_specific_violation">View Violation</b-button>
      </template>

    </b-table>

    <b-row>
      <b-col md="6" class="my-1">
        <b-pagination :total-rows="totalRows" :per-page="perPage" v-model="currentPage" class="my-0" />
      </b-col>
    </b-row>

  </b-container>
</template>

<script>

export default {
  data () {
    return {
      items: items,
      fields: [
        { key: 'truck_number', label: 'Truck Number', sortable: true, 'class': 'text-center' },
        { key: 'trailer_number', label: 'Trailer Number', sortable: true, 'class': 'text-center' },
        { key: 'violation_date', label: 'Date of Violation' },
        { key: 'actions', label: 'Actions' }
      ],
      currentPage: 1,
      perPage: 5,
      totalRows: items.length,
      pageOptions: [ 5, 10, 15 ],
      sortBy: null,
      sortDesc: false,
      sortDirection: 'asc',
      filter: null,
    }
  },
  },
  computed: {
    sortOptions () {
      return this.fields
        .filter(f => f.sortable)
        .map(f => { return { text: f.label, value: f.key } })
    }
  },
  components:{
      allViolations
  },
  data: {
      allViolations:[]
  },
  beforeMount(){
      allViolations=[];
  },
  methods: {
    onFiltered (filteredItems) {
      // Trigger pagination to update the number of buttons/pages due to filtering
      this.totalRows = filteredItems.length
      this.currentPage = 1
    }
    //Send Request all Violations for Driver_ID
    getAllViolations(driver_id){
        axios.get('all/violations/url',driver_id).then(data=>{
          this.$store.dispatch('setAllViolation',{driver_id,data}).then(()=>{
                this.$router.push('allViolation');
          })
        })
    }
  }
}
</script>

那么我该如何正确设计此链接并在路由器中将driver_id传递给第二个模板？

0 个答案:

没有答案
相关问题
最新问题