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

【问题标题】：How to call a vue.js function on page load with vue3.0 and antd2.1.2如何使用 vue3.0 和 antd2.1.2 在页面加载时调用 vue.js 函数
【发布时间】：2021-08-06 21:44:45
【问题描述】：

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

有个函数“getScriptList”，放在vue2.0“挂载”的组件中可以自动执行

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

我把它放在“onMounted”组件中，但是没用。

这个函数“getScriptlist”可以通过手动执行

" 执行脚本列表

我的 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>

【问题讨论】：

标签： vue.js antd

【解决方案1】：

您的组件生命周期看起来不错，但应该将 dataSource 定义为 ref 以便反应：

const dataSource = ref([]);

然后替换

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

与

dataSource.value=response.data

【讨论】：