VueJS: Use multiple component inside a reusable component

Question

I would like to create a reusable component that consists of two dropdowns. For the dropdowns I'm using vue-select and I would like to be able to bind the two dropdowns value into a single variable. This is so far what I've done:

ReusableMultiDroddown.vue

<template>
    <div class="container">
        <div class="row">
            <div class="input-group">                        
                <div class="col-md-6">                  
                    <v-select
                            placeholder="Dropdown1"
                            :options="options1"                            
                            :value="value.month"
                            ref="dd1"
                            v-model="selected1"
                            @input="update()"></v-select>
                </div>
                <div class="col-md-6">                  
                    <v-select
                            placeholder="Dropdown1"
                            :options="options1"                            
                            :value="value.year"
                            ref="dd2"
                            v-model="selected2"
                            @input="update()"></v-select>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import vSelect from 'vue-select';
    export default {
      props: ['value'],
      components: {         
        'v-select' : vSelect,
      },
      data() {
        return {
            selected1: '',
            selected2: '',
            options1: [
                {
                    label: "one",
                    value: 1
                },
                {
                    label: "two",
                    value: 2
                }
            ]
        }
      },
      methods: {
        update() {
            console.log(selected1);
            console.log(selected2);
          this.$emit('input', {
            month: +this.$refs.dd1.value,
            year: +this.$refs.dd2.value
          })
        }
      }
    }
</script>

I just can't get the value of 'value' to be binded to main v-model

Here is how I would like to use on parent component

ParentComponent.vue

<template>
    <div class="container">
        <rmd v-model="date" ></rmd>
    </div>
</template>

<script>
    import ReusableMultiDropDown from '../common/ReusableMultiDropDown.vue'
    export default {
      components: { 
        'rmd': ReusableMultiDropDown
      },

      data() {
        return {
          date: {
            month: 1,
            year: 2017
          }       
        }
      }
    }
</script>

So whenever any of the two dropdown is changed, my variable on parent component is also changed

Where does this v-select component come from?

Phil
– Phil

2018-09-05 04:02:03 +00:00
Commented Sep 5, 2018 at 4:02 — Phil
– Phil, Commented Sep 5, 2018 at 4:02
github.com/sagalbot/vue-select

euclid135
– euclid135

2018-09-05 04:12:16 +00:00
Commented Sep 5, 2018 at 4:12 — euclid135
– euclid135, Commented Sep 5, 2018 at 4:12

Phil · Accepted Answer · 2018-09-05 06:40:04Z

I'm not sure what you're doing with those :value bindings but you should emit the values in your data properties (ie, selected1 and selected2) as those are bound through v-model.

Here's an example. I've tried to simplify the variable names.

Vue.component('v-select', VueSelect.VueSelect);
Vue.component('rmd', {
  template: `<div class="container">
    <div class="row">
      <div class="input-group">
        <div class="col-md-6">
          <v-select placeholder="Dropdown1" :options="options" v-model="month" @input="update"></v-select>
        </div>
        <div class="col-md-6">
          <v-select placeholder="Dropdown1" :options="options" v-model="year" @input="update"></v-select>
        </div>
      </div>
    </div>
  </div>`,
  data() {
    return {
      month: '',
      year: '',
      options: [{
          label: "one",
          value: 1
        },
        {
          label: "two",
          value: 2
        }
      ]
    }
  },
  computed: {
    monthValue () {
      // handle nullable values from v-select
      return this.month && this.month.value
    },
    yearValue () {
      // handle nullable values from v-select
      return this.year && this.year.value
    }
  },
  methods: {
    update () {
      this.$emit('input', {
        month: this.monthValue,
        year: this.yearValue
      })
    }
  }
})
new Vue({
  el: '#app',
  data: {
    date: {month: 1, year: 2017}
  }
})

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-select@latest"></script>

<div id="app">
  <rmd v-model="date"></rmd>
  <pre>{{date}}</pre>
</div>

Collectives™ on Stack Overflow

VueJS: Use multiple component inside a reusable component

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related