[英]How to recover data from one component to another in vue JavaScript
I have two components: 我有两个组成部分:
component 1: recherche 组件1:检索
<template>
<button @click='allRecords()'>Search</button>
<table>
<thead>
<th class="center">Date</th>
<th class="center">Statut</th>
</thead>
<tbody>
<tr v-for='contact in contacts' @click="seeContactDetails(contact.data.bid)">
<td>{{ contact.date }}</td>
<td>{{ contact.data.statut }}</td>
</tr>
</tbody>
</table>
</template>
<script lang="js">
import axios from 'axios';
export default {
name: 'recherche',
components: {
},
props: [],
mounted() {
},
data() {
return {
contacts: [],
details:[],
}
},
methods: {
allRecords: function() {
axios.get(`/api/recherche/`)
.then(response => {
this.contacts = response.data.list;
})
.catch(error => {
console.log(error);
});
},
seeContactDetails: (bid) => {
window.location = `/#/detail/${bid}`;
axios.get(`/api/detail/contacts?bid=${bid}`)
.then(response => {
this.details = response.data.list;
})
.catch(error => {
console.log(error);
});
}
},
}
</script>
But I want to display the result of seeContactDetails (bid) in the detail component 但是我想在详细信息组件中显示seeContactDetails(bid)的结果
Component 2: detail 组件2:详细信息
<template lang="html">
<div v-for='detail in details'>
<!-- ligne -->
<div class="row">
<!-- colonne -->
<div class="col-md-2">org: {{detail.data.org}}</div>
<div class="col-md-2">num:{{detail.data.num}} </div>
</div>
</template>
<script lang="js">
export default {
name: 'detail',
props: ['recherche'],
mounted() {},
data() {
return {
details: []
}
},
methods: {
},
computed: {
}
}
</script>
In summary I want to read the resuts of an axios query, in another component, but I do not know how we do, despite the docs. 总之,我想在另一个组件中读取axios查询的结果,但是尽管有文档,但我不知道我们该怎么做。 I try to put the name of the component recherche in props of detail but it does not work
我尝试将组件recherche的名称放在详细的道具中,但它不起作用
The way I would recommend doing this (for most cases) is to use vuex. 我建议这样做的方法(大多数情况下)是使用vuex。
These are the files I would use 这些是我要使用的文件
After some action on component 1 , a vuex action is triggered. 在对组件1进行某些操作之后,将触发vuex操作 。 Inside the vuex action the appropriate apiHandler function is invoked.
在vuex动作内部,将调用适当的apiHandler函数。 Inside the vuex action the response is handled with a
then()
, which pushes the response into the vuex mutator . 在vuex动作内部,使用
then()
处理响应,该响应将响应推送到vuex mutator中 。 This mutation will update the getter which will update any component that is listening to the change in state. 这种变异将更新吸气剂 ,该吸气剂将更新正在侦听状态变化的任何组件。
It's a bit more complex than having the components talk directly, but it makes the architecture scalable. 比让组件直接对话要复杂一些,但是它使体系结构可扩展。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.