Question

我有一个由vue-flatpickr-component组成的vue date组件。当然，当我将config选项作为prop传入时，它们会按预期工作，但是，如果要更改其中一个可能的config选项，它将不会向下传播。我不是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])。

Answer 1

有时候，当您累了时，您不应该编写代码:)，但希望这会在某个时候对某人有所帮助。我在想这个。数据通过props传递，如果控制数据发生更改，则必须将其反映在传播的数据中。就像v-model的价值支柱一样。

因此，与其将配置对象绑定在此对象上，该配置对象不会与它初始化时的prop值挂钩，而应从prop中计算出计算函数，该函数将根据新传入的prop属性而变化。

因此只需将计算函数更改为：

main()

并删除数据元素。

...基础

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

以编程方式在vue-flatpickr上重置配置选项

1 个答案: