javascript - 如何实时更新v-data-table数据？

Question

我正在开发一个节点和电子应用程序。我正在使用 vuetify 生成从 Oracle 数据库加载数据的表 (v-data-table)。数据根据输入的值变化，但表不更新!

当输入值更改时:process.env.ANO_SEM = input.val()

然后我调用loadData()函数

process.env.ANO_SEM在getEventos()函数中用作sql查询的参数

我的代码:

 $('#input').keyup(e => {
        if (e.keyCode == 13) {
            process.env.ANO_SEM = $('#input').val()
            loadData()
        }
 })

// Get data from BD
async function getEventos() {
    const sql = await fs
        .readFileSync(path.join(process.env.ROOT_PATH, 'src/db/sql/get-evento.sql'))
        .toString()
    return await db.getData(sql, [process.env.ANO_SEM])
}

async function loadData() {
    let data = await getEventos()
    console.log(data) // the data aways change, but the table never update
    new Vue({
        el: '#app',
        methods: {
            rowClick(idEvento) {
                require(path.join(process.env.CTRL_PATH, './evento/evento-ctrl.js'))(
                    window.$,
                    idEvento
                )
            }
        },
        data: function() {
            return {
                selectedItem: 'Sample',
                pagination: {
                    sortBy: 'ID'
                },
                headers: [
                    { text: 'ID', value: 'ID', align: 'center', width: '10%' },
                    { text: 'Descrição', value: 'DESCRICAO', align: 'left', width: '60%' },
                    { text: 'Período', value: 'PERIODO', align: 'left', width: '20%' },
                    {
                        text: 'Data Impressão',
                        value: 'DATA_IMPRESSAO',
                        align: 'left',
                        width: '10%'
                    }
                ],
                eventos: data
            }
        }
    })
}

我的html:

<div id="app" class="table-eventos">
        <v-app>
            <v-data-table
                :headers="headers"
                :items="eventos"
                :rows-per-page-items="[100]"
                item-key="name"
                class="elevation-1"
            >
                <!-- :pagination.sync="pagination" -->
                <template slot="items" slot-scope="props">
                    <tr @click="rowClick(props.item.ID)">
                        <td class="text-xs-left">{{ props.item.ID }}</td>
                        <td class="text-xs-left">{{ props.item.DESCRICAO }}</td>
                        <td class="text-xs-left">{{ props.item.PERIODO }}</td>
                        <td class="text-xs-left">{{ props.item.DATA_IMPRESSAO }}</td>
                    </tr>
                </template>
            </v-data-table>
        </v-app>
    </div>

Answer 1

所以基本上你的代码中发生的事情是你将你的 vue 加载到 #app 中，它被渲染并且你的新 #app 元素看起来不同 - 但仍然链接到你的新 vue 并渲染 - 但这次 vue 不知何故失败了。

长话短说 - 将渲染元素放入可以重新渲染的静态模板中:

我根据你的草图做了一个简单的例子:

Vue.config.productionTip = false;
const mockData = Array.from({length: 100}, (_, i) => [{
      DATA_IMPRESSAO: `mock${i}`,
      PERIODO: `mock${i}`,
      DESCRICAO: `mock${i}`,
      ID: `mock${i}`,
  }])
  
  let nonReactiveIndex = Math.floor(Math.random()*mockData.length)
 setInterval(() =>
new Vue({
  template: "#example",
  vuetify: new Vuetify(),
  mounted() {
    nonReactiveIndex = Math.floor(Math.random()*mockData.length)
    console.log("mounted", nonReactiveIndex);
    
  },
  data() {
    return {
      headers: [
        { text: "ID", value: "ID", align: "center", width: "10%" },
        { text: "Descrição", value: "DESCRICAO", align: "left", width: "60%" },
        { text: "Período", value: "PERIODO", align: "left", width: "20%" },
        {
          text: "Data Impressão",
          value: "DATA_IMPRESSAO",
          align: "left",
          width: "10%"
        }
      ],
      eventos: mockData[nonReactiveIndex]
      
    };
  },
  
}
).$mount('#app'), 2000)

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>

    <div id="app" class="table-eventos">
      
    </div>
    
    <template id="example">
    <v-app>
        <v-data-table
          :headers="headers"
          :items="eventos"
          :rows-per-page-items="[100]"
          item-key="name"
          class="elevation-1"
        >
          <!-- :pagination.sync="pagination" -->
          <template slot="items" slot-scope="props">
            <tr @click="rowClick(props.item.ID)">
              <td class="text-xs-left">{{ props.item.ID }}</td>
              <td class="text-xs-left">{{ props.item.DESCRICAO }}</td>
              <td class="text-xs-left">{{ props.item.PERIODO }}</td>
              <td class="text-xs-left">{{ props.item.DATA_IMPRESSAO }}</td>
            </tr>
          </template>
        </v-data-table>
      </v-app>
    </template>

<小时/>

将所有内容都实现到 vue 组件中并让 vue 处理 react 性是一个更好的设计:

Vue.config.productionTip = false;
const mockData = Array.from({length: 100}, (_, i) => [{
      DATA_IMPRESSAO: `mock${i}`,
      PERIODO: `mock${i}`,
      DESCRICAO: `mock${i}`,
      ID: `mock${i}`,
  }])
  

new Vue({
  template: "#example",
  vuetify: new Vuetify(),
  mounted() {
    
    console.log("mounted", this.reactiveIndex);
    
  },
  data() {
    return {
      reactiveIndex : Math.floor(Math.random()*mockData.length),
      headers: [
        { text: "ID", value: "ID", align: "center", width: "10%" },
        { text: "Descrição", value: "DESCRICAO", align: "left", width: "60%" },
        { text: "Período", value: "PERIODO", align: "left", width: "20%" },
        {
          text: "Data Impressão",
          value: "DATA_IMPRESSAO",
          align: "left",
          width: "10%"
        }
      ],
     
      
    };
  },
  computed: {
      eventos(){ return mockData[this.reactiveIndex] }
  },
  methods: {
    load(){
      this.reactiveIndex = Math.floor(Math.random()*mockData.length)
      console.log(this.reactiveIndex)
    }
  }
}
).$mount('#app')

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>

    <div id="app" class="table-eventos">
      
    </div>
    
    <template id="example">
    <v-app>
        <v-btn @click="load">load</v-btn>
        
        <v-data-table
          :headers="headers"
          :items="eventos"
          :rows-per-page-items="[100]"
          item-key="name"
          class="elevation-1"
        >
          <!-- :pagination.sync="pagination" -->
          <template slot="items" slot-scope="props">
            <tr @click="rowClick(props.item.ID)">
              <td class="text-xs-left">{{ props.item.ID }}</td>
              <td class="text-xs-left">{{ props.item.DESCRICAO }}</td>
              <td class="text-xs-left">{{ props.item.PERIODO }}</td>
              <td class="text-xs-left">{{ props.item.DATA_IMPRESSAO }}</td>
            </tr>
          </template>
        </v-data-table>
      </v-app>
    </template>