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

ogq8wdun  于 2023-05-18  发布在  Vue.js
关注(0)|答案(1)|浏览(126)

我的vue项目与vue3.0.0和antd 2.1.2
有一个函数“getScriptList”,它可以在使用vue2.0的组件“挂载”中自动执行
我想知道如何在用vue3.0加载页面时自动执行?
我把它放在了“onMounted”组件中,但它是无用的。
这个函数“getScriptlist”可以通过以下方式执行
“<a-button type=“primary”@click=“getScriptlist()"> ExecuteScriptList

我的vue页面测试.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>
yshpjwxd

yshpjwxd1#

你的组件生命周期看起来不错,但是dataSource应该定义为ref,以便React:

const dataSource = ref([]);

然后替换

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

dataSource.value=response.data

相关问题