1

我有一个由 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 []
    },

When a different home visit specialist is chosen, it will update with Vue's reactivity.

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

4

1 回答 1

0

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

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

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


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

并删除数据元素。

... 小学

对不起，奶酪来晚了，我松了一口气。

于 2019-05-04T03:56:44.270 回答