[Question] How to access to multiselect component ref

I want to make a cascade componet A-multiselect with B-multiselect comp by a list dynamically

<multiselect v-for="item in list"
  v-ref:item.value    // not work in vue@1
>  
</multiselect>

how can i access the comp when it updated , selected or removed ? suggestion: can the multiselect comp can expose the refs when emit event ?

[shentao]

I will look into it after work. 😃

[theseawolves]

Sorry for the busy days and thank to your attention. I do have some confuse about data init , ajax and reactivity , need some good practices 😃

JSFilddle is here

//html dependent on vue@1 and vue-multiselect@latest
 <h3>Filters</h3>
  <multiselect 
      v-for="item in list"
      :id="item.name"
      :multiple="true"
      :hide-selected="true"
      v-ref:item
      :selected="item.selected"
      :options="item.options"
      :placeholder="item.name"
      @update="updateSelected">
    </multiselect>
    <hr>
    <!--for search results-->    
    <div>
      <table border=1 v-if="results.length>0" width="100%">
        <thead><tr><th></th><th >results</th></tr></thead>
        <tbody><tr v-for="item in results">
          <td v-text="$index+1"></td>
          <td v-text="item"></td>
        </tr></tbody>
      </table>
      <span v-else>no results</span>
    </div>

//javascript
new Vue({
  el: 'body',
  components: {
    multiselect: VueMultiselect.Multiselect
  },
  created:function(){
    //ajax
    var self = this
    setTimeout(function(){
            self.list = [
            {name:'A',selected: [],options: ['list_a', 'of_a', 'options_a']},
                {name:'B',selected: [],options: []},//is empty and according 'A' dynamic change
                {name:'C',selected: [],options: ['list_c', 'of_c', 'options_c']}
             ]
    },500)
  },
  data: {
      list:[],
      results:[]
  },
  computed: {
    condition () {
            let arr = []
            this.list.forEach(item=>{
            if(item.selected.length>0){
            arr.push(item.name + '=' + item.selected.join(','))
           }        
      })

      return arr
    }
  },
  ready: function() {
  },
  methods: {
    updateSelected (newSelected,id) {
            let item
        if (id === 'A') {
            // change 'B' according to 'A'
          const compA = this.queryCompById(this.$refs.item, id)
          const compB = this.queryCompById(this.$refs.item, 'B')

          item = this.queryListById(compB.id)
          item.selected = []
          item.options = item.options.length > 0 ? item.options.reverse() : ['list_b', 'of_b', 'options_b']
        }
        //update all multiselects
        item = this.queryListById(id)
        item.selected = newSelected

                //load results
        this.$nextTick(()=>{
          this.fetchData(this.condition)
        })
    },
    queryCompById (comps,id) {
      for (let i = 0; i < comps.length; i++) {
        let comp = comps[i]
        if (comp.id === id) return comp
      }
    },
    queryListById (id) {
      for (let i = 0; i < this.list.length; i++) {
        if (this.list[i].name === id) {
          return this.list[i]
        }
      }
    },
    fetchData (condition) {
     //ajax
        var self = this      
    setTimeout(function(){
            self.results= []
            self.condition.forEach(item=>{
            self.results.push(item)
            })
      },500)
    }

  }
})