Блог

Я ищу решение для функции, которую мне нужно реализовать в своем проекте. У меня есть таблица данных с определенным количеством элементов, где в одном из столбцов есть несколько кнопок действий. Одна из кнопок-это кнопка редактирования. Что мне нужно, так это перенаправить страницу на определенный маршрут, например «/редактировать», после нажатия кнопки, где появится форма с некоторыми полями, которые необходимо заполнить данными из выбранного элемента в таблице.

На данный момент у меня есть следующее:

Страница с таблицей данных

 <template>
  <v-container>
    <v-card>
      <v-data-table :headers="headers" :items="navQuestoes">
        <template v-slot:[`item.actions`]="{ item }">
          <router-link to="/edit">
            <v-icon small class="mr-2">mdi-pencil</v-icon>
          </router-link>
        </template>
      </v-data-table>
    <v-card>
  <v-container>
<template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
            headers: [
                { text: "Identificador", sortable: false, value: "id"},
                { text: "Domínio",  sortable: false, value: "domain"},
                { text: "Opções", sortable: false, value: "actions"},
            ],
            navQuestoes: [],
        }
    },
    created(){
        axios.get(`http://localhost:8001/question`)
          .then((response)=>{
            this.navQuestoes=response.data
            console.log(this.navQuestoes);
          },(error) =>{
              console.log(error);
          });
    },
}
</script>
 

Следующий код предназначен для компонента с формой, поля которой мне нужно заполнить данными, поступающими с первой страницы с таблицей данных.

 <template>
  <v-form v-model="valid">
    <v-container>
          <v-text-field v-model="formData.id" label="Identificador"/>

          <v-text-field v-model="formData.domain" label="Domínio"/>
    </v-container>
  </v-form>
</template>


<script>
  export default {
    data() {    
      return{
        valid: false,
        formData:{
            id: '',
            domain: '',
          },
      }  
    }   
  }
</script>
 

Я начал использовать <router-link> , который, очевидно, перенаправляет на страницу всякий раз, когда нажимается значок, и теперь я думал об использовании $emit для отправки данных на другую страницу. Является ли это хорошим решением? Как бы я это реализовал сейчас? Просто для уточнения, отправляемые данные соответствуют элементу в массиве «navQuestoes», который соответствует элементу в строке таблицы, где был нажат значок. Используемые структуры данных должны быть такими, как показано на рисунке, потому что на них уже основано гораздо больше кода.

Есть 2 способа сделать это:

Во-первых, это использовать Vuex для управления массивом, основанным на глобальном состоянии. Во-вторых, это использовать VueRouter, как:

 const router = new VueRouter({
  routes: [
    {
      path: '/ComponentWhichReceivesData/:id/:domain',
      components: {
        default: ComponentWhichReceivesData,
      },
      props: {
        // object mode, but it can be function mode
        default: { id: 1, domain: "example"},

      }
    }
  ]
})
 

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