1

Добавил в свой проект на vue.js компонент datepicker:

Vue.component('d_picker', {
data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: 'Today',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: 'Yesterday',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: 'A week ago',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      value1: '',
    };
  },

  template:` 
          <div>
            <div class="block">
              
              <el-date-picker
                  v-model="value1"
                  type="datetime"
                  placeholder="Дата и время события">
              </el-date-picker>
            </div>
            
          </div>
        `
        })

Столкнулся с проблемой - обновление данных в переменной value1 должно повлечь за собой реактивное обновление данных в переменной основного моего приложения (app.my_date), а компонент видит переменные только внутри себя (не могу к v-model сразу привязать целевую переменную) и я не знаю как мне обратиться к содержимому переменной в компоненте...

Подскажите, пожалуйста, какие есть варианты реализации

1 ответ 1

1

При использовании на компоненте v-model делает следующее:

<custom-input
  v-bind:value="searchText"
  v-on:input="searchText = $event"
></custom-input>

Чтобы это действительно работало, элемент <input> внутри компонента должен:

  1. Привязывать значение атрибута value к входному параметру value
  2. По событию input генерировать собственное пользовательское событие input с новым значением. Вот так:
Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
  `
})

Пример:

Vue.component('d-picker', {
  props: ['value'],
  template: ` 
  <fieldset>
   <legend>Дочерний компонент d-picker</legend>
   <input type="date" :value="value" @input="$emit('input', $event.target.value)">
   </fieldset>`
})

new Vue({
  el: '#app',
  data: {
    date: '2020-09-16'
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <fieldset>
    <legend>Родительский компонент</legend>
    {{ date }}
    <d-picker v-model="date"></d-picker>
  </fieldset>
</div>

Больше об использовании компонентов и v-model на компонентах в руководстве vue - Основы компонентов

1
  • Понял, спасибо! Адаптировал под себя - заработало) 16 сен 2020 в 20:05

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.