Сброс параметра конфигурации на vue-flatpickr программно - PullRequest
Новая
       30

Сброс параметра конфигурации на vue-flatpickr программно

0 голосов
/ 04 мая 2019

У меня есть компонент даты vue, который состоит из компонента vue-flatpickr. Когда я передаю параметры конфигурации в качестве реквизитов, они, конечно, работают должным образом, однако, если вы захотите изменить один из параметров конфигурации, который должен быть возможным, он не будет распространяться вниз. Я не гуру Вью, любой совет будет полезен.

Я использую компонент страницы в приложении Laravel, но он не должен быть релевантным, однако, в случае, если кто-то ответит с помощью vuex или vue-router, они здесь не будут работать.

Вот элементы формы в игре из page.vue: 




    
    {{ this.appointmentDates }}

Вот вычисленное свойство, определяющее изменение конфигурации: 

computed: {
    appointmentDates(){
        if(this.form.specialist !== null){
            return this.availableDates[this.form.specialist - 1]
        }
        return []
    },

Когда выбирается другой специалист по посещению на дому, он обновляется с реактивностью Вью.

У меня есть вычисляемое свойство, меняющее параметры конфигурации. Вот данные реквизита и соответствующее вычисленное свойство из файла MaterialDate.vue: 

import flatPickr from 'vue-flatpickr-component';
import 'flatpickr/dist/flatpickr.css';
export default {
components: {
    flatPickr
},
props: {
    value: String,
    label: String,
    validationError: String,
    name: {required:true},
    optional: {
        default: false
    },
    externalOptions: {}
},
data() {
    return {
        defaults: {disableMobile: true,},
        options: this.externalOptions
    }
},
computed: {
    config(){
        return Object.assign({}, this.defaults, this.options)
    },

Это, конечно, никогда не обновит опцию включенных дат, потому что реквизит является неизменным, мне нужно получить доступ к разделу set(option, value) обернутого vue-flatpickr-component. Тем не менее, мое Vue kungfu не достаточно сильное, чтобы погружать его, чтобы посмотреть, как я могу получить к нему доступ и программно позвонить set('enabled', [new dates]).

1 Ответ

0 голосов
/ 04 мая 2019

Иногда вам не следует кодировать, когда вы устали :) Но, надеюсь, это поможет кому-нибудь в какой-то момент. Я был над этим думать. Данные передаются через реквизиты, и если они контролируют изменения данных, они должны быть отражены в распространяемых данных. Очень похоже на v-модель с ценностью проп.

Таким образом, вместо привязки объекта config к this.options, который не остается привязанным к значению prop, из которого он был инициализирован, вычисляемая функция должна вычисляться из prop, который будет меняться в зависимости от нового, переданного в options prop ,

просто измените вычисляемую функцию на: 


computed: {
    config(){
        return Object.assign({}, this.defaults, this. externalOptions)
    },

и удалите элемент данных.

... Элементарный

Извините за сыр, уже поздно, и я чувствую облегчение.

...