Question

我有一个VueJS模板文件（我们称之为驱动程序状态），该文件由一个表组成，该表由JSON输出中的数据填充。

示例JSON输出：

{"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},

因此，该表格将打印driver_id以外的所有不同列，并将在Actions co下显示一个按钮

只要has_violations等于true，就会有条件地渲染该按钮。这是按钮代码：

<template slot="list_of_violations" slot-scope="row">
<b-button v-if="row.value.list_of_violations == true" id="account_list">View Violations</b-button></template>

我想做的是让此按钮成为另一个模板vuejs文件（称为“所有违规”）的链接，该文件将从模板A中提取driver_id，然后执行以下操作：

从Vuex商店导入driver_id
发送JSON请求以获取driver_id的所有违规列表
阅读Ajax响应
将Ajax结果打印到“所有违规”表中

但是如何制作将driver_id存储到Vuex Store的按钮，然后将其导入“所有违规”模板中？

Answer 1

在渲染表时，可能使用v-for，即使您不打印该列（只需从存储中将其与其他列一起检索），您仍应有权使用driver_id。因此您的按钮如下所示：

<b-button @click="getAllViolations(driver_id)" v-if="row.value.list_of_violations == 
true" id="account_list">View Violations</b-button>

click事件将在methods vue属性中导致一个异步函数，有点像：

new Vue({
  el: "#app",
  components:{
  allViolations
  },
  data: {
      allViolations:[]
  },
  beforeMount(){
      allViolations=[];
  },
  methods: {
    getAllViolations(driver_id){
    axios.get('all/violations/url',driver_id).then(data=>{
          this.allViolations[driver_id]=data
    })
    }
  }
})

然后在模板中将allViolation组件也添加到v-for循环内，以便它可以访问driver_id：

<all-violation :violations="allViolations[driver_id]" 
                v-if="allViolations[driver_id]"></all-violation>

v-if在这里非常重要，以确保all-violation组件在其数据存在之前不会被渲染。

在我的示例中，我通过axios发出了ajax请求，该请求返回了Promise

如果您不希望all-violation成为组件的子元素，而要转到新的“页面”，则应安装vue-router，将按钮设为<router-link>。这里的所有内容：https://router.vuejs.org/

如果这就是您想要做的，您将存储数据，然后移至另一条路线，因此您的函数应如下所示：

getAllViolations(driver_id){
    axios.get('all/violations/url',driver_id).then(data=>{
          this.$store.dispatch('setAllViolation',{driver_id,data}).then(()=>{
                this.$router.push('allViolation');
          })
    })
}

请确保您必须编写setAllViolation存储操作（甚至将axios请求移至该操作内部）并创建allViolation路线，以将您引向allViolation Vue组件将从存储中检索其数据。

希望它听起来并不复杂。真的不是。祝你好运！

创建按钮链接以使用Vuex商店

1 个答案: