以编程方式重置 vue-flatpickr 上的配置选项答案

【问题标题】：Reseting a config option on vue-flatpickr programatically以编程方式重置 vue-flatpickr 上的配置选项
【发布时间】：2019-09-22 13:10:33
【问题描述】：

我有一个由 vue-flatpickr-component 组成的 vue 日期组件。当然，当我将配置选项作为道具传递时，它们会按预期工作，但是，如果想要更改应该可能的配置选项之一，它不会向下传播。我不是 Vue 专家，任何建议都会有所帮助。

我在 Laravel 应用程序中使用页面组件，它应该不相关，但是，以防万一有人用 vuex 或 vue-router 回答，这些在这里不起作用。

以下是 page.vue 中的表单元素：


<material-select
    name="specialist"
    label="Specialist"
    default-text="CHOOSE HOMEVISIT SPECIALIST"
    :options="staffMembers"
    v-model="form.specialist"
    :validation-error="form.errors.first('specialist')"
    class="mb-4"
></material-select>
<div class="w-1/2">
    <material-date
            label="Appointment date"
            name="appointment_date"
            v-model="form.appointment_date"
            :validation-error="form.errors.first('appointment_date')"
            class="mb-4"
            :external-options="{
                enable: this.appointmentDates,
            }"
    ></material-date>
    <pre>{{ this.appointmentDates }}</pre>
</div>

这是驱动配置更改的计算属性：

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

选择不同的家庭访问专家时，它将以Vue的反应性更新。

我有一个更改配置选项的计算属性。以下是 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)
    },

这当然永远不会更新启用日期选项，因为道具是不可变的，我需要访问由 vue-flatpickr-component 包装的 set(option, value) 部分。但是，我的 Vue 功夫还不够强大，无法对它进行源代码潜水以查看我如何访问它并以编程方式调用 set('enabled', [new dates])。

【问题讨论】：

感谢@nnnmmm 的编辑，这样读起来更好。我不知道如何投票或通过积分来花时间。
感谢道具（双关语）:)

标签： vuejs2 vue-component flatpickr

【解决方案1】：

有时，您不应该在疲倦时编写代码 :) 但希望这会在某个时候对某人有所帮助。我想多了。数据通过 props 传递，如果控制数据发生变化，它必须反映在传播的数据中。很像带有 value 属性的 v-model。

因此，与其将配置对象绑定到 this.options 上，后者不会一直挂钩到它初始化的 prop 值，而是应该根据 prop 计算计算函数，该 prop 将根据传入的新选项 prop 而变化.

所以只需将计算函数更改为：


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

并删除数据元素。

...小学

对不起奶酪来晚了，我放心了。

【讨论】：