我是Vue.js的新手，我正尝试从包含一些过滤器，年龄和状态的json数据中显示html表，这些过滤器，年龄和状态也是json。我显示了表格并制定了过滤器的方法。我现在想要的是，当一个过滤器更改时，另一个过滤器根据我的json数据的结果动态地更改。例如（如果我在州中单击18-25，则只想显示具有该年龄段结果的州）
这是我的过滤器：
<select id="age" v-model="selectedAge" v-on:change="updateStates()" class="form-control" name="age">
<option value="ALL">Show All</option>
<option v-for="age in filteredAges" v-bind:value="age.value">{{ age.age }}</option>
</select>
<select id="state" v-model="selectedState" v-on:change="updateAges()" class="form-control" name="state">
<option value="ALL">Show All</option>
<option v-for="state in filteredStates" v-bind:value="state.abbr">{{ state.name }}</option>
</select>
这是我的桌子：
<table>
<thead>
<tr>
<th>Name/Alias(es):</th>
<th>Age:</th>
<th>Location(s):</th>
<th>Relative(s):</th>
<th>Sources:</th>
<th>Results:</th>
</tr>
</thead>
<tbody>
<tr v-for="result in filteredResults">
<td class="name">
<div class="rtable-name-block">
<div class="rtable-new"></div>
<div class="rtable-ttl">
<div class="rtable-name"><a href="#">{{ result.name }}</a></div>
<div class="rtable-list disc">
<h5>Aliases:</h5>
<ul>
<li>Johnny Smith</li>
<li>Joe Smith</li>
<li>Blody John</li>
</ul>
</div>
</div>
</div>
</td>
<td class="age">
<div class="rtable-age">{{ result.age }}</div>
</td>
<td class="locations">
<div class="rtable-list">
<ul>
<li><strong>Belmont, MA</strong></li>
<li>Newton Upper Falls, MA</li>
<li>Watertown, MA</li>
<li>Cambridge, MA</li>
<li>Chestnut Hill, MA</li>
</ul>
</div>
</td>
<td class="relatives">
<div class="rtable-list">
<ul>
<li v-for="rel in result.relatives">{{ rel }}</li>
</ul>
</div>
</td>
<td class="sources">
<div class="rtable-sources">
<ul>
<li><img src="img/seals_state/federal.png" alt=""></li>
<li><img src="img/seals_state/al.png" alt=""></li>
</ul>
</div>
</td>
<td class="button">
<div class="rtable-button"><a class="btn tr-btn download" href="#">Download Report</a></div>
<div class="rtable-id">Report Id: <strong>{{ result.report }}</strong></div>
</td>
</tr>
这是我的Vue javascript文件：
var vm = new Vue({
el: "#results",
data: {
results: [
{ name: 'John Smith', age: '35', state: 'FL', relatives: ['Dana Smith', 'Diana Smith', 'Test Smith'], report: 'dsgsd'},
{ name: 'Leslie Mac', age: '24', state: 'FL', relatives: ['Dana Smith', 'Diana Smith', 'Test Smith'], report: 'dsgsd'},
{ name: 'Andrea ely', age: '56', state: 'FL', relatives: ['Dana Smith', 'Diana Smith', 'Test Smith'], report: 'dsgsd'},
{ name: 'Amit Sarna', age: '23', state: 'CA', relatives: ['Dana Smith', 'Diana Smith', 'Test Smith'], report: 'dsgsd'},
{ name: 'David Miller', age: '76', state: 'AL', relatives: ['Dana Smith', 'Diana Smith', 'Test Smith'], report: 'dsgsd'},
{ name: 'David Miller', age: '67', state: 'AL', relatives: ['Dana Smith', 'Diana Smith', 'Test Smith'], report: 'dsgsd'},
{ name: 'David Miller', age: '37', state: 'CA', relatives: ['Dana Smith', 'Diana Smith', 'Test Smith'], report: 'dsgsd'},
{ name: 'David Miller', age: '76', state: 'AL', relatives: ['Dana Smith', 'Diana Smith', 'Test Smith'], report: 'dsgsd'},
],
selectedState: "ALL",
selectedAge: "ALL",
states: [
{ abbr: 'AL', name: 'Alabama'},
{ abbr: 'AK', name: 'Alaska'},
{ abbr: 'AZ', name: 'Arizona'},
{ abbr: 'AR', name: 'Arkansas'},
{ abbr: 'CA', name: 'California'},
{ abbr: 'CO', name: 'Colorado'},
{ abbr: 'CT', name: 'Connecticut'},
{ abbr: 'DE', name: 'Delaware'},
{ abbr: 'DC', name: 'District of Columbia'},
{ abbr: 'FL', name: 'Florida'},
{ abbr: 'GA', name: 'Georgia'},
{ abbr: 'HI', name: 'Hawaii'},
{ abbr: 'ID', name: 'Idaho'},
{ abbr: 'IL', name: 'Illinois'},
{ abbr: 'IN', name: 'Indiana'},
{ abbr: 'IA', name: 'Iowa'},
{ abbr: 'KS', name: 'Kansas'},
{ abbr: 'KY', name: 'Kentucky'},
{ abbr: 'LA', name: 'Louisiana'},
{ abbr: 'ME', name: 'Maine'},
{ abbr: 'MD', name: 'Maryland'},
{ abbr: 'MA', name: 'Massachusetts'},
{ abbr: 'MI', name: 'Michigan'},
{ abbr: 'MN', name: 'Minnesota'},
{ abbr: 'MS', name: 'Mississippi'},
{ abbr: 'MO', name: 'Missouri'},
{ abbr: 'MT', name: 'Montana'},
{ abbr: 'NE', name: 'Nebraska'},
{ abbr: 'NV', name: 'Nevada'},
{ abbr: 'NH', name: 'New Hampshire'},
{ abbr: 'NJ', name: 'New Jersey'},
{ abbr: 'NM', name: 'New Mexico'},
{ abbr: 'NY', name: 'New York'},
{ abbr: 'NC', name: 'North Carolina'},
{ abbr: 'ND', name: 'North Dakota'},
{ abbr: 'OH', name: 'Ohio'},
{ abbr: 'OK', name: 'Oklahoma'},
{ abbr: 'OR', name: 'Oregon'},
{ abbr: 'PA', name: 'Pennsylvania'},
{ abbr: 'RI', name: 'Rhode Island'},
{ abbr: 'SC', name: 'South Carolina'},
{ abbr: 'SD', name: 'South Dakota'},
{ abbr: 'TN', name: 'Tennessee'},
{ abbr: 'TX', name: 'Texas'},
{ abbr: 'UT', name: 'Utah'},
{ abbr: 'VT', name: 'Vermont'},
{ abbr: 'VA', name: 'Virginia'},
{ abbr: 'WA', name: 'Washington'},
{ abbr: 'WV', name: 'West Virginia'},
{ abbr: 'WI', name: 'Wisconsin'},
{ abbr: 'WY', name: 'Wyoming'},
],
ages: [
{ value: '18-25', age: '18 - 25' },
{ value: '26-35', age: '26 - 35' },
{ value: '36-45', age: '36 - 45' },
{ value: '46-55', age: '46 - 55' },
{ value: '56-65', age: '56 - 65' },
{ value: '66-75', age: '66 - 75' },
{ value: '76-85', age: '76 - 85' },
{ value: '96-105', age: '96-105' },
],
filteredResults: [
{ name: 'John Smith', age: '35', state: 'FL', relatives: ['Dana Smith', 'Diana Smith', 'Test Smith'], report: 'dsgsd'},
{ name: 'Leslie Mac', age: '24', state: 'FL', relatives: ['Dana Smith', 'Diana Smith', 'Test Smith'], report: 'dsgsd'},
{ name: 'Andrea Ely', age: '56', state: 'FL', relatives: ['Dana Smith', 'Diana Smith', 'Test Smith'], report: 'dsgsd'},
{ name: 'Amit Sarna', age: '23', state: 'CA', relatives: ['Dana Smith', 'Diana Smith', 'Test Smith'], report: 'dsgsd'},
{ name: 'David Miller', age: '76', state: 'ID', relatives: ['Dana Smith', 'Diana Smith', 'Test Smith'], report: 'dsgsd'},
{ name: 'David Miller', age: '67', state: 'AL', relatives: ['Dana Smith', 'Diana Smith', 'Test Smith'], report: 'dsgsd'},
{ name: 'David Miller', age: '37', state: 'CA', relatives: ['Dana Smith', 'Diana Smith', 'Test Smith'], report: 'dsgsd'},
{ name: 'David Miller', age: '76', state: 'AL', relatives: ['Dana Smith', 'Diana Smith', 'Test Smith'], report: 'dsgsd'},
],
filteredAges: [
{ value: '18-25', age: '18 - 25' },
{ value: '26-35', age: '26 - 35' },
{ value: '36-45', age: '36 - 45' },
{ value: '46-55', age: '46 - 55' },
{ value: '56-65', age: '56 - 65' },
{ value: '66-75', age: '66 - 75' },
{ value: '76-85', age: '76 - 85' },
{ value: '96-105', age: '96-105' },
],
filteredStates: [
{ abbr: 'AL', name: 'Alabama'},
{ abbr: 'AK', name: 'Alaska'},
{ abbr: 'AZ', name: 'Arizona'},
{ abbr: 'AR', name: 'Arkansas'},
{ abbr: 'CA', name: 'California'},
{ abbr: 'CO', name: 'Colorado'},
{ abbr: 'CT', name: 'Connecticut'},
{ abbr: 'DE', name: 'Delaware'},
{ abbr: 'DC', name: 'District of Columbia'},
{ abbr: 'FL', name: 'Florida'},
{ abbr: 'GA', name: 'Georgia'},
{ abbr: 'HI', name: 'Hawaii'},
{ abbr: 'ID', name: 'Idaho'},
{ abbr: 'IL', name: 'Illinois'},
{ abbr: 'IN', name: 'Indiana'},
{ abbr: 'IA', name: 'Iowa'},
{ abbr: 'KS', name: 'Kansas'},
{ abbr: 'KY', name: 'Kentucky'},
{ abbr: 'LA', name: 'Louisiana'},
{ abbr: 'ME', name: 'Maine'},
{ abbr: 'MD', name: 'Maryland'},
{ abbr: 'MA', name: 'Massachusetts'},
{ abbr: 'MI', name: 'Michigan'},
{ abbr: 'MN', name: 'Minnesota'},
{ abbr: 'MS', name: 'Mississippi'},
{ abbr: 'MO', name: 'Missouri'},
{ abbr: 'MT', name: 'Montana'},
{ abbr: 'NE', name: 'Nebraska'},
{ abbr: 'NV', name: 'Nevada'},
{ abbr: 'NH', name: 'New Hampshire'},
{ abbr: 'NJ', name: 'New Jersey'},
{ abbr: 'NM', name: 'New Mexico'},
{ abbr: 'NY', name: 'New York'},
{ abbr: 'NC', name: 'North Carolina'},
{ abbr: 'ND', name: 'North Dakota'},
{ abbr: 'OH', name: 'Ohio'},
{ abbr: 'OK', name: 'Oklahoma'},
{ abbr: 'OR', name: 'Oregon'},
{ abbr: 'PA', name: 'Pennsylvania'},
{ abbr: 'RI', name: 'Rhode Island'},
{ abbr: 'SC', name: 'South Carolina'},
{ abbr: 'SD', name: 'South Dakota'},
{ abbr: 'TN', name: 'Tennessee'},
{ abbr: 'TX', name: 'Texas'},
{ abbr: 'UT', name: 'Utah'},
{ abbr: 'VT', name: 'Vermont'},
{ abbr: 'VA', name: 'Virginia'},
{ abbr: 'WA', name: 'Washington'},
{ abbr: 'WV', name: 'West Virginia'},
{ abbr: 'WI', name: 'Wisconsin'},
{ abbr: 'WY', name: 'Wyoming'},
]
},
watch: {
selectedState: function () {
this.updateFilters();
// this.updateAges();
},
selectedAge: function () {
this.updateFilters();
// this.updateStates();
},
},
methods: {
updateFilters: function () {
const self = this;
const interval = self.selectedAge.split("-");
this.filteredResults = this.results.filter(function (result) {
return self.selectedState === 'ALL' ? true : result.state === self.selectedState
}).filter(function (result) {
return self.selectedAge === 'ALL' ? true : result.age >= interval[0] && result.age <= interval[1];
});
},
updateAges: function () {
const self = this;
const interval = self.selectedAge.split("-");
this.filteredAges = this.results.filter(function (result) {
return self.selectedState === 'ALL' ? true : result.state === self.selectedState;
}).map(function (result) {
return self.ages.filter(function (item) {
return item.value >= result.age && item.value <= result.age;
})
})
},
updateStates: function () {
const self = this;
const interval = self.selectedAge.split("-");
this.filteredStates = this.results.filter(function (result) {
return self.selectedAge === 'ALL' ? true : result.age >= interval[0] && result.age <= interval[1];
}).map(function (result) {
return self.states.filter(function (item) {
return item.abbr === result.state;
})
})
},
resetFilters: function () {
this.filteredResults = this.results;
this.filteredStates = this.states;
this.filteredAges = this.ages;
}
},
}）;
提前谢谢