Динамическая передача значения JSON в другой шаблон

Question

У меня есть один шаблон, назовем его Шаблон A , который печатает данные JSON в таблицу, один столбец содержит кнопку, которая условно отображается, когда has_violations равно true.

Anпример таблицы:

Таблица

Что я хочу сделать, это взять 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

Мне нравится ответ Йонга, но я бы предпочел, чтобы вы передали driverID в качестве реквизита для вашего маршрута, а затем использовали геттер VueX, чтобы получить нарушения для конкретного ID.

Answer 2

Основные шаги:

1. Получить индекс строки при нажатии кнопки.
2. Получить индекс данных JSON, используя значение из шага 1.
3. Сохранитьданные JSON из шага 2 в Vuex .
4. Отправьте пользователя в шаблон B. используя маршрутизатор.
5. Извлеките данные из хранилища в шаблоне 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
    }
  }
});