[英]How can I transmit from a component to another when redirecting in VueJS?
[英]VueJS - How can i refresh a table component from another component?
我有两个 Vue 组件:一个是表单,另一个是表格,它们在同一页面中。 我想在提交表单时用新值刷新表格。
为了做到这一点,我需要调用 function 从表单组件中获取数据并将其显示在表格上,所以我需要跨两个不同的组件调用 function,我做到了并且它有效。
问题是,虽然我可以在表单组件的另一个组件中调用 function,但表格不会用新值刷新,我该如何解决这个问题?
这是我的代码:
表单组件:
<template>
...
</template>
<script>
import axios from 'axios'
export default {
props:{
order:{
type:String,
default:'data'
},
},
mounted() {
console.log('Component mounted.')
},
data() {
return {
name: '',
description: '',
output: ''
};
},
methods: {
formSubmit(e) {
e.preventDefault();
console.log('Called fetchData!')
let currentObj = this;
axios.post('MYURL', {
'add_data': data,
})
.then(function (response) {
this.fetchData()
currentObj.output = response.data;
})
.catch(function (error) {
currentObj.output = error;
});
}
fetchData: function(){
this.$root.$emit('table_component')
},
}
}
</script>
表格组件:
<template>
<v-data-table
:headers="headers"
:items="customers"
:items-per-page="5"
:hide-default-footer="true"
class="elevation-1"
>
</v-data-table>
</v-container>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
search: '',
headers: [
{ text: 'Name', value: 'Name' },
{ text: 'Item', value: 'Item' },
],
customers: [],
}
},
mounted() {
this.fetchData()
this.$root.$on('table_component', () => {
this.fetchData()
},
},
methods: {
fetchData() {
fetch('MYURL')
.then(response => response.json())
.then(data => {
console.log(data)
this.customers = data;
})
},
}
}
</script>
这是我在这段代码中所做的:当提交表单并收到响应时,我调用 function fetchData()
。 调用 function 是因为我看到console.log('Called fetchData!')
被触发,所以它起作用了,唯一不起作用的是表没有用新值刷新。 任何建议表示赞赏!
似乎您在当时的 function 中的上下文有问题
formSubmit(e) {
e.preventDefault();
console.log('Called fetchData!')
let currentObj = this;
axios.post('MYURL', {
'add_data': data,
})
.then((response) => {
this.fetchData()
currentObj.output = response.data;
})
.catch(function (error) {
currentObj.output = error;
});
}
您可以使用如上所示的箭头 function 来调用 this.fetchData
或者你可以使用绑定
formSubmit(e) {
e.preventDefault();
console.log('Called fetchData!')
let currentObj = this;
axios.post('MYURL', {
'add_data': data,
})
.then(function (response) {
this.fetchData()
currentObj.output = response.data;
}.bind(this))
.catch(function (error) {
currentObj.output = error;
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.