element-ui get label and value under select multiple choice situation

Directly on the code

               <el-select
                  v-model="value"
                  multiple
                  collapse-tags
                  ref="select"
                  @change="changeLocationValue"
                  style="margin-left: 20px;"
                  placeholder="请选择角色">
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.roleName"
                    :value="item.id">
                  </el-option>
                </el-select>

data(){
    return {
        options:[
           {id:1,roleName:'dafe'},
           {id:2,roleName:'gged'},
           {id:3,roleName:'dafgddvde'},
           {id:4,roleName:'hjrtb'},
           {id:5,roleName:'fgdcbd'}
         ],
        departmentIds:[],
        departmentNames:[]       
    }
}

 

   changeLocationValue (Val) {
       the this .departmentIds = [] // initialization data
       the this .departmentNames = [] // initialization data
       for (the let I = 0; I <=. 1-val.length; I ++ ) {
         the this .options.find ( (Item) => { // Options here is the data source 
          IF (item.id == Val [I]) {
             the this .departmentIds.push (item.id) where I // value changed ID
             the this .departmentNames .push (item.roleName) // label here I changed roleName 
          } 
        }); 
      } 
      console.log ( the this .departmentIds) 
      console.log ( the this .departmentNames) 
    },