如何使用vue3.0和antd2.1.2在页面加载时调用vue.js函数

Question

我使用vue3.0.0和antd 2.1.2的vue项目

有一个函数"getScriptList"，它可以在安装了vue2.0的组件中自动执行。

我想知道当使用vue3.0加载页面时，它如何自动执行？

我把它放在组件"onMounted“中，但它没有用。

这个函数"getScriptlist“可以由mannul执行

“ ExecuteScriptList

“

我的vue页面test.vue：

<template>

  <a-table
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      :columns="columns"
      :data-source="dataSource"
      bordered
    >
    <template #operation="{ record }">
      <div>
        <span >
          <a @click="save(record.key)">Delete</a>
          <a @click="edit(record.key)">Edit</a>
        </span>
      </div>
    </template>
  </a-table>
</template>


<script>

import { defineComponent, reactive, ref,computed,toRefs,onMounted } from 'vue';
import axios from 'axios';

const columns = [
  {
    title: 'name',
    dataIndex: 'name',
  },
  {
    title: 'timestamp',
    dataIndex: 'timestamp',
  },
  {
    title: 'location',
    dataIndex: 'location',
  },
  {
    title: 'operation',
    dataIndex: 'operation',
    slots: {
      customRender: 'operation',
    },
  },
];




export default defineComponent({
  setup() {
    const dataSource = [];
    ......

        function getScriptlist(){   
        axios.post(
          "/api/script/getPid",
          qs.stringify({
                pid: 5,     
          }),
          {
            headers: { "Content-Type": "application/x-www-form-urlencoded" },
          })
        .then(response=>{            
 


             for( var i=0;i<response.data.length;i++)
             {
                dataSource.push(response.data[i])
                
               
             }

    

            })
        .catch(function(error){
         console.log(error);
        });


             
       
    }

 

   onMounted(() => 
        {
           

            getScriptlist();

            
        })





    return {
            getScriptlist,
      dataSource,
      columns,
            .......
            .......


      
    };
  },
});
</script>
<style>

</style>

Answer 1

您的组件生命周期看起来很好，但是应该将dataSource定义为ref以便具有响应性：

const dataSource = ref([]);

然后替换

for( var i=0;i<response.data.length;i++)
{
    dataSource.push(response.data[i])           
}

使用

dataSource.value=response.data