Vueによる三段連動ドロップダウン枠

展示width="100%"height="300"src="///jsfiddle.net/3 g qrmbum/embedded/"allowfullscreen="allowfullscreen">
html部分

は、v-modelを用いて、selectの値

を設定し、取得する.

は、v-forを使用して、optionリスト

を表示する.

は、:valueを使用して、オプトモーション属性

を設定する.

は、{{}}を用いてコンテンツ

を出力する.

<div id="test">
      ：
    <select v-model="UnitSelected">
        <option v-for="item in UnitList" :value="item.id">{{item.name}}option>
    select>
      ：
    <select v-model="DepartmentSelected">
        <option v-for="item in DepartmentList" :value="item.id">{{item.name}}option>
    select>
      ：
    <select v-model="UserSelected">
        <option v-for="item in UserList" :value="item.id">{{item.name}}option>
    select>
div>

JavaScript部分

は、dataにおいて、vue関連変数

を定義する.

は、createdにおいて初期化変数の動作を完了する

.

は、watchでUnitとDepartmentのプルダウンボックスの番号を傍受し、リスト

を更新する.

var UnitRows = [
    {name:"1",id:"1"},
    {name:"2",id:"2"},
];
var DepartmentRows = [
    {name:"11",id:"1",pid:"1"},
    {name:"12",id:"2",pid:"1"},
    {name:"21",id:"3",pid:"2"},
    {name:"22",id:"4",pid:"2"}
];
var UserRows = [
    {name:"111",id:"1",pid:"1"},
    {name:"112",id:"2",pid:"1"},
    {name:"121",id:"3",pid:"2"},
    {name:"122",id:"4",pid:"2"},
    {name:"211",id:"5",pid:"3"},
    {name:"212",id:"6",pid:"3"},
    {name:"221",id:"7",pid:"4"},
    {name:"222",id:"8",pid:"4"}
]
var vm = new Vue({
    el:"#test",
    data:{
        UnitSelected:"",
        UnitList:[],
        DepartmentSelected:"",
        DepartmentList:[],
        UserSelected:"",
        UserList:[]
    },
    created:function () {
        this.UnitList = UnitRows;
        this.UnitSelected = this.UnitList.length>0 ? this.UnitList[0].id : "";

        var val = this.UnitSelected;
        this.DepartmentList = DepartmentRows.filter(function (x) { return x.pid == val });
        this.DepartmentSelected = this.DepartmentList.length>0 ? this.DepartmentList[0].id : "";

        val = this.DepartmentSelected;
        this.UserList = UserRows.filter(function (x){ return x.pid == val});
        this.UserSelected = this.UserList.length>0 ? this.UserList[0].id : "";
    },
    watch:{
        UnitSelected:function (val) {
            this.DepartmentList = DepartmentRows.filter(function (x) { return x.pid == val });
            this.DepartmentSelected = this.DepartmentList.length>0 ? this.DepartmentList[0].id : "";
        },
        DepartmentSelected:function (val) {
            this.UserList = UserRows.filter(function (x){ return x.pid == val});
            this.UserSelected = this.UserList.length>0 ? this.UserList[0].id : "";
        }
    }
});