英文:
Pass data after clicking on button and navigating to another component (display this data in the other component )
问题
I can help you with the translation. Here's the translated content:
我打算在我的 user.vue 中使用 post 方法，使用 Vue.js、Quasar 和 TypeScript：
const onEditSubmit = async () => {
try {
const response = await axios.post('http://localhost/SPV2API/api/SalaryPackage/CreateSalaryPackage', data);
const stepCreationList = response.data; // 假设响应是 StepCreation 对象的数组
console.log(stepCreationList, "setps");
router.push({
name: ROUTE_NAME.API_EXPLORER,
});
} catch (error) {
}
};
这是我的 api-explorer 的 index.vue：
<template>
<div class="q-pa-md">
<q-stepper
v-model="step"
header-nav
ref="stepper"
color="primary"
animated
>
<q-step
:name="1"
title="总工资"
icon="settings"
:done="done1"
>
<div> <!-- 这里显示结果数据 --> </div>
</q-step>
</q-stepper>
</div>
</template>
请注意，我已经将代码中的注释翻译成了中文。
英文:
I'm about using post method in my user.vue using vue js quasar typescript :
const onEditSubmit = async () => {
try {
const response = await axios.post('http://localhost/SPV2API/api/SalaryPackage/CreateSalaryPackage', data);
const stepCreationList = response.data; // Assuming the response is an array of StepCreation objects
console.log(stepCreationList,"setps");
router.push({
name: ROUTE_NAME.API_EXPLORER,
});
} catch (error) {
}
};
This index.vue of my api-explorer :
<template>
<div class="q-pa-md">
<q-stepper
v-model="step"
header-nav
ref="stepper"
color="primary"
animated
>
<q-step
:name="1"
title="Total Salary"
icon="settings"
:done="done1"
>
<div> </div> </q-step> </div></template>
I want to display the result data in the <div> </div>
答案1
得分: 1
如果我正确理解你的问题，你想从一个组件传递数据到另一个组件。在vue.js中，有多种方法可以实现这个目标，但在这种情况下，最直接的方法是将数据作为一个prop传递。
在你想要使用这个prop的组件中，你可以这样写：
defineProps<StepCreation[]>{};
更多信息请查看这里：https://router.vuejs.org/guide/essentials/passing-props.html#passing-props-to-route-components
英文:
If I understand your question correctly, you want to pass data from one Component to another. There are multiple ways to achieve that in vue.js, but the most straight forward in this case is passing the data as a prop.
router.push({ name: ROUTE_NAME.API_EXPLORER, props: stepCreationList });
In the Component where you want to use the prop, you can write:
defineProps<StepCreation[]>{}; // script setup syntax
More infos here: https://router.vuejs.org/guide/essentials/passing-props.html#passing-props-to-route-components
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论