Vue

by kabanoki

HTML

<div id="app">
    <h1>好きなものを選択</h1>
    <div>
        カテゴリー：
        <select name="item" v-model="selectItem">
            <option value="">選択する</option>
            <option v-for="(item,index) in items" v-bind:value="item.no" :key="index">{{item.label}}</option>
        </select>
    </div>
    <div>
        品物：
        <select name="item2" v-model="selectSubItem[0]">
            <option value="">選択する</option>
            <option v-for="(item, index) in getItems2" v-bind:value="item.name" :key="index">{{item.name}}</option>
        </select>
    </div>
    <div>
        品物：
        <select name="item2" v-model="selectSubItem[1]">
            <option value="">選択する</option>
            <option v-for="(item, index) in getItems2" v-bind:value="item.name" :key="index">{{item.name}}</option>
        </select>
    </div>
    <div>
        品物：
        <select name="item2" v-model="selectSubItem[2]">
            <option value="">選択する</option>
            <option v-for="(item, index) in getItems2" v-bind:value="item.name" :key="index">{{item.name}}</option>
        </select>
    </div>
    selectItem：<br>
    <pre>{{selectSubItem}}</pre>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
        el: "#app",
        data: {
            items: [
                {no:1, label:'果物'},
                {no:2, label:'野菜'},
                {no:3, label:'肉'},
                {no:4, label:'ホームページ'},
            ],
            subItems: [
                {category:1, name:'バナナ'},
                {category:1, name:'りんご'},
                {category:1, name:'ぶどう'},
                {category:2, name:'きゃべつ'},
                {category:2, name:'トマト'},
                {category:3, name:'豚肉'},
                {category:3, name:'牛肉'},
                {category:4, name:'カバの樹'},
            ],
            selectItem:'',
            selectSubItem:[],
        },
        computed: {
            getItems2: function(){
                var self = this;
                return this.subItems.filter(function(item){
                    console.log(self.selectItem, item.category.toString(), item.category.toString().indexOf(self.selectItem) !== -1);
                    return (item.category.toString().indexOf(self.selectItem) !== -1);
                });
            }
        },
        watch: {
            selectItem: function(){
                this.selectSubItem = [];
            }
        }
    })