我一直在寻找3级别的上市样本。我发现很少有2个级别的样本。以下样本来自2个级别。
我在选择子类别项目时遇到触发v模型计算事件的问题，为了解决这个问题，我们需要添加v-model =“subcategory”，并且必须在data（）
中声明点击here
**HTML**
<link rel='stylesheet prefetch'
href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.2/css/bulma.min.css'>
<div class="container" id="app">
<div class="section">
<h1 class="title">Vue.js - Conditional Select</h1>
<hr>
<conditional-select
:categories="categories":newcategories="newcategories"
:subcategories="subcategories" ></conditional-select>
</div><!-- /.section -->
</div><!-- /.container -->
**Vue.js**
Vue.component('conditional-select', {
template: `
<div id="ConditionalSelect">
<div class="select">
<select v-model="category" name="category">
<option v-for="category in categories"
:value="category.id">{{ category.name }}</option>
</select>
</div>
<div class="select">
<select v-model="subcategory" name="subcategory">
<option v-for="subcategory in conditionalSubcategories"
:value="subcategory.subid" :selected="subcategory.selected == true">{{
subcategory.name }}</option>
</select>
</div>
<div class="select">
<select name="newcategory">
<option v-for="newcategory in conditionalNewcategories"
:value="newcategory.id" :selected="newcategory.selected == true">{{
newcategory.name }}</option>
</select>
</div>
</div>
`,
props: ['categories', 'subcategories', 'newcategories'],
data() {
return {
category: '',
subcategory: '',
}
},
computed: {
conditionalSubcategories() {
return this.subcategories.filter(subcategory => {
return subcategory.category_id == this.category;
});
},
conditionalNewcategories() {
return this.newcategories.filter(newcategory => {
return newcategory.subcategory_id == this.subcategory;
});
},
},
created() {
let category = this.categories.find(category => {
return category.selected == true;
});
let subcategory = this.subcategories.find(subcategory => {
return subcategory.selected == true;
});
this.category = category.id;
this.subcategory = subcategory.subid;
}
});
var app = new Vue({
el: '#app',
data: {
categories: [
{ id: '0', name: 'Select a category', selected: true },
{ id: '1', name: 'Games', selected: false },
{ id: '2', name: 'Apps', selected: false }
],
subcategories: [
{ subid: '0', category_id:'1', name: 'Select a subcategory',
selected:
false },
{ subid: '1', category_id:'1', name: 'Adventure', selected: false
},
{ subid: '2', category_id:'1', name: 'Shooter', selected: false },
{ subid: '3', category_id:'1', name: 'Simulation', selected: false
},
{ subid: '4', category_id:'1', name: 'Sports', selected: false },
{ subid: '5', category_id:'2', name: 'Illustration', selected:
false },
{ subid: '6', category_id:'2', name: 'Music Production', selected:
false },
{ subid: '7', category_id:'2', name: 'Webdesign', selected: false
},
{ subid: '8', category_id:'2', name: 'Office', selected: false },
],
newcategories: [
{ id: '1', subcategory_id:'1', name: 'New Adventure', selected:
false },
{ id: '2', subcategory_id:'1', name: 'New Shooter', selected: false
},
{ id: '3', subcategory_id:'1', name: 'New Simulation', selected:
false },
{ id: '4', subcategory_id:'1', name: 'New Sports', selected: false
},
{ id: '5', subcategory_id:'2', name: 'New Illustration', selected: false
},
{ id: '6', subcategory_id:'2', name: 'New Music Production',
selected: false },
{ id: '7', subcategory_id:'2', name: 'New Webdesign', selected:
false },
{ id: '8', subcategory_id:'2', name: 'NewOffice', selected: false
},
],
}
});