Question

我有一个模板，我们称它为模板A ，它将JSON数据打印到表中，其中一列包括一个按钮，当has_violations等于true时，该按钮有条件地呈现。

表格示例：

我要完成的是将与该特定行关联的driver_id放入路由器链接，并将其传递到另一个模板文件中，我们将其称为模板B 。

但是我该如何使用Vuex Store完成此操作？

示例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},

Answer 1

基本步骤：

单击按钮获取行的索引。
使用步骤1中的值获取JSON数据的索引。
Store the JSON data from Step 2 into Vuex。
使用路由器将用户发送到模板B。
在模板B中时从存储中检索数据

由于您没有显示确切的结构，因此下面的代码只是一个基本结构。

代码如下：

/* VUEX demo */
new Vuex.Store({
  state: {
    driver_data: undefined
  },
  mutations: {
    recordDriver({ state }, payload){
      state.driver_data = payload;
    }
  }
});


/* TEMPLATE A demo */
new Vue.component('template-a', {
  data: function(){
    return {
      // Assume this is the JSON
      driverJSON: [
        { driver_id: 1, driver_name: 'John Smith' },
        { driver_id: 2, driver_name: 'Bob John' }
      ]
    };
  },
  methods: {
    onButtonClicked: function(e){
      const button = e.target;
      const td = button.parentElement;
      const tr = td.parentElement;
      const indexOfTr = [...tr.parentElement.children].findIndex(row => row === tr);

      const dataToStore = this.driverJSON[indexOfTr];

      // Store data into $store
      this.$store.commit('recordDriver', dataToStore);

      // After storing, direct page using $router
      this.$router.go({ ... });
    }
  }
});


/* TEMPLATE B demo */
new Vue.component('template-b', {
  data: function(){
    return {
      // Get driver data using $store
      driver: this.$store.state.driver_data
    }
  }
});

Answer 2

我喜欢Yong的回答，但我建议您将driverID作为道具传递给路线，然后使用VueX吸气剂获取特定ID的违规行为。

动态将JSON值传递给另一个模板

2 个答案: