我的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>
1条答案
按热度按时间yshpjwxd1#
你的组件生命周期看起来不错,但是
dataSource
应该定义为ref
,以便React:然后替换
与