我想知道这是否可行..
我有两个组成部分：
公司
DataView
Companies显示用户订阅的当前公司，并显示用户可以使用的可能公司列表。
DataView显示基于公司的表中的所有数据（这存储在PHP内的会话中并返回）
我想做什么：
当用户更改公司时，它会向PHP文件发送请求并使用所选公司更新视图。但是，这不会影响DataView中的表格，我想要做的是创建应用程序，以便每当选择新公司时，它会向服务器发送另一个API调用并根据所选公司获取结果（虽然会议）..
我正在研究的内容
在DataView内，我有以下方法：
fetchTheData() {
// Fetch from the API
// store the results
}
现在我可以在这里添加一个watches来监听另一个视图上的数据变化吗？从本质上讲，它可以只是一个触发器，因为服务器处理它返回的所有数据。
编辑（代码）： companies.vue
<template>
<div class="dv">
<div class="header-block header-block-nav">
<ul class="nav-profile">
<li class="profile dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<span class="name">{{current.name}}</span>
</a>
<div class="dropdown-menu profile-dropdown-menu" aria-labelledby="dropdownMenu1" style="left:10px;">
<a v-for="company in companies" @click="handleChange(company)">
{{company.name}}
</a>
</div>
</li>
</ul>
</div>
</div>
</template>
<script>
import Vue from 'vue'
import axios from 'axios'
axios.defaults.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
export default {
data() {
return {
model: {},
current: {},
companies: {},
}
},
mounted(){
this.fetchIndexData();
},
created() {
},
methods: {
handleChange(company) {
//console.log(company.name);
axios.post(`/api/user/companies/set`, {
companyId: company.id,
}).then(function (response) {
console.log(response.data);
return;
});
return;
},
fetchIndexData() {
var vm = this;
axios.get(`/user/companies/get`)
.then(function(response) {
Vue.set(vm.$data, 'current', response.data.current);
Vue.set(vm.$data, 'companies', response.data.all);
console.log(response);
});
}
}
}
</script>
DataView.vue
<template>
<div class="dv">
<div class="dv-header">
<div class="dv-header-search col-md-3 col-xs-12" style="margin-bottom:25px;">
<input type="text" class="dv-header-input form-control boxed"
placeholder="Search"
v-model="query.search_input"
@keyup="fetchIndexData()">
</div>
</div>
<div class="table-responsive">
<transition
name="custom-classes-transition"
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th v-for="column in columns" @click="toggleOrder(column)">
{{column}}
</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="row in model">
<td v-for="(value, key) in row">{{value}}</td>
<td>
<a :href="'/users/' + row.id + '/edit/'" class="btn-table btn-edit btn-primary btn-xs">
<i class="edit-button fa fa-pencil-square-o" aria-hidden="true"></i>
</a>
<a :href="'/users/' + row.id + '/delete/'" class="btn-table btn-delete btn-primary btn-xs">
<i class="fa fa-trash" aria-hidden="true"></i>
</a>
<!--
<a :href="'/users/' + row.id + '/edit/'">
Edit
</a> -->
</td>
</tr>
</tbody>
</table>
</transition>
</div>
</div>
</template>
<script>
import Vue from 'vue'
import axios from 'axios'
export default {
props: ['source', 'title'],
data() {
return {
model: {},
columns: {},
query: {
page: 1,
column: 'id',
direction: 'desc',
per_page: 15,
search_column: 'id',
search_input: ''
},
}
},
mounted(){
console.log("here");
this.fetchIndexData();
},
created() {
this.fetchIndexData();
},
methods: {
next() {
},
prev() {
},
fetchIndexData() {
var vm = this;
axios.get(`${this.source}?search_input=${this.query.search_input}&page=${this.query.page}`)
.then(function(response) {
Vue.set(vm.$data, 'model', response.data.model)
Vue.set(vm.$data, 'columns', response.data.columns)
});
}
}
}
</script>
基本上，当handleChange内部触发companies.vue时，我想在DataView.vue中触发fetchIndexData