How to call a vue.js function on page load with vue3.0 and antd2.1.2

Viewed 84

my vue project with vue3.0.0 and antd 2.1.2

there is a function "getScriptList", it can be executed automatically when placed in Component "mounted" with vue2.0

and I wonder how can it be automatically executed when loading the page with vue3.0?

I placed it in the component "onMounted" ,but it's useless.

this function "getScriptlist" can be executed mannul by

" <a-button type="primary" @click="getScriptlist()"> ExecuteScriptList

"

my vue page 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>
1 Answers

Your component life cycle looks fine, but the dataSource should be defined as ref in order to be reactive:

const dataSource = ref([]);

then replace

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

with

dataSource.value=response.data
Related