VueJS: использовать несколько компонентов внутри повторно используемого компонента - PullRequest
Новая
       9

VueJS: использовать несколько компонентов внутри повторно используемого компонента

0 голосов
/ 05 сентября 2018

Я хотел бы создать повторно используемый компонент, состоящий из двух раскрывающихся списков. Для выпадающих списков я использую vue-select, и я хотел бы иметь возможность связать значение двух выпадающих списков в одну переменную. Это так далеко, что я сделал:

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>

Я просто не могу получить значение 'value' для привязки к основной v-модели

Вот как я бы хотел использовать родительский компонент

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>

Таким образом, при изменении любого из двух раскрывающихся списков моя переменная в родительском компоненте также изменяется

1 Ответ

0 голосов
/ 05 сентября 2018

Я не уверен, что вы делаете с этими :value привязками, но вам следует выдавать значения в ваших data свойствах (то есть selected1 и selected2), поскольку они связаны через v-model .

Вот пример. Я попытался упростить имена переменных. 

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}
  }
})





  
  {{date}}
...