Как установить данную ячейку таблицы в Vue. js - PullRequest
Новая
       30

Как установить данную ячейку таблицы в Vue. js

0 голосов
/ 19 февраля 2020

Я использую @ vue / cli 4.1.2 и хотел бы обновить данные ячейки таблицы значениями из вызова ax ios. Однако это почти работает, вместо того, чтобы помещать значение результата только в ячейку из той строки, где я нажал кнопку «Выполнить запрос», весь столбец «Результаты» устанавливается для данного заданного результата.

Вот мой код: 

<template>
    <div class="container-fluid">
      <div class="text-center">
        <h1>Recon Query Automator</h1>
       <div v-if="queries.length === 0">
            <h2> No query found at the moment </h2>
        </div>
      </div>

        <div class="">
            <table class="table table-bordered">
              <thead class="thead-dark">
                <tr>
                  <th scope="col" @click="sort('id')">ID</th>
                  <th scope="col" @click="sort('cat')">Category</th>
                  <th scope="col" @click="sort('name')">Name</th>
                  <th scope="col">SQL</th>
                  <th scope="col">Result</th>
                  <th scope="col">Manage</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="query in sortedQueries" :key="query._id">
                  <td>{{ query.id }}</td>
                  <td>{{ query.cat }}</td>
                  <td>{{ query.name }}</td>
                  <td>{{ query.sql }}</td>
                  <td v-on:click="runQuery(query.id)">{{ result }}</td>
                  <td>
                    <div class="d-flex justify-content-between align-items-center">
                                <div class="btn-group" style="margin-bottom: 20px;">
                                  <router-link :to="{name: 'Edit', params: {id: query._id}}" class="btn btn-sm btn-outline-secondary">Edit Query </router-link>
                                  <button class="btn btn-sm btn-outline-secondary" v-on:click="deleteQuery(query._id)">Delete Query</button>
                                  <button class="btn btn-sm btn-outline-secondary" v-on:click="runQuery(query.id)">Run Query</button>

                                </div>
                              </div>
                  </td>
                </tr>
              </tbody>
            </table>
            <p>
            <button @click="prevPage">Previous</button> 
            <button @click="nextPage">Next</button>
            </p>
          </div>
    </div>
</template>

Машинопись: 

<script>
import { server } from "../helper";
import axios from "axios";
export default {
  data() {
    return {
      queries: [],
      result: '',
      currentSort:'name',
      currentSortDir:'asc',
      pageSize:999,
      currentPage:1
    };
  },
  created() {
    this.fetchQueries();
  },
  computed: {
    sortedQueries:function() {
      return this.queries.sort((a,b) => {
        let modifier = 1;
        if(this.currentSortDir === 'desc') modifier = -1;
        if(a[this.currentSort] < b[this.currentSort]) return -1 * modifier;
        if(a[this.currentSort] > b[this.currentSort]) return 1 * modifier;
        return 0;
      }).filter((row, index) => {
        let start = (this.currentPage-1)*this.pageSize;
        let end = this.currentPage*this.pageSize;
        if(index >= start && index < end) return true;
    });;
    }
  },
  methods: {
    fetchQueries() {
      axios
        .get(`${server.baseURL}/reconQuery/queries`)
        .then(data => 
          {
            this.queries = data.data;
          });
    },
    deleteQuery(id) {
      axios
        .delete(`${server.baseURL}/reconQuery/delete?queryID=${id}`)
        .then(data => {
          console.log(data);
          window.location.reload();
        });
    },
    runQuery(id) {
      axios
        .get(`${server.msURL}/run/${id}`)
        .then(Response => {
          alert(Response.data);
          this.result = Response.data;
          console.log(this.result);
        });
        },
    sort(s) {
      //if s == current sort, reverse
      if(s === this.currentSort) {
        this.currentSortDir = this.currentSortDir==='asc'?'desc':'asc';
      }
      this.currentSort = s;
      },
      nextPage() {
        if((this.currentPage*this.pageSize) < this.cats.length) this.currentPage++;
      },
      prevPage() {
        if(this.currentPage > 1) this.currentPage--;
      }
   }
};
</script>

Меня интересует только метод runQuery (id), так как иначе он работает нормально.

1 Ответ

2 голосов
/ 19 февраля 2020

Ваш результат является глобальным для всех запросов, поэтому он отображается для всех запросов. Вам нужно что-то вроде: 

data: () => ({
  result: {}
  ...
}),
methods: {
  runQuery(id) {
    axios
      .get(`${server.msURL}/run/${id}`)
      .then(Response => {
        this.$set(this.result, id, Response.data);
      });
  },

и в шаблоне: 

<td v-on:click="runQuery(query.id)">{{ result[query.id] || '' }}</td>
...