Vuejs2 以编程方式重置vue FlatPicker上的配置选项

Vuejs2 以编程方式重置vue FlatPicker上的配置选项,vuejs2,vue-component,flatpickr,Vuejs2,Vue Component,Flatpickr,我有一个vue日期组件,它由vue FlatPicker组件组成。当然,当我将配置选项作为道具传递进来时,它们会按预期工作,但是,如果想要更改其中一个可能的配置选项,它将不会向下传播。我不是Vue大师,任何建议都会有帮助 我在一个Laravel应用程序中使用了一个页面组件,它不应该是相关的,但是,万一有人用vuex或vue路由器应答,这些在这里就不起作用了 以下是page.vue中的表单元素: 当选择不同的家访专家时,将根据Vue的反应性进行更新 我有一个更改配置选项的计算属性。以下是Mate

我有一个vue日期组件,它由vue FlatPicker组件组成。当然,当我将配置选项作为道具传递进来时,它们会按预期工作,但是,如果想要更改其中一个可能的配置选项,它将不会向下传播。我不是Vue大师,任何建议都会有帮助

我在一个Laravel应用程序中使用了一个页面组件,它不应该是相关的,但是,万一有人用vuex或vue路由器应答,这些在这里就不起作用了

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


当选择不同的家访专家时,将根据Vue的反应性进行更新

我有一个更改配置选项的计算属性。以下是MaterialDate.vue文件中的道具数据和相关计算属性:

从“vue FlatPicker组件”导入FlatPicker;
导入'flatpickr/dist/flatpickr.css';
导出默认值{
组成部分:{
扁平采摘器
},
道具:{
值:字符串,
标签:字符串,
validationError:字符串,
名称:{必需:true},
可选:{
默认值:false
},
外部选项:{}
},
数据(){
返回{
默认值:{disableMobile:true,},
选项:this.externalOptions
}
},
计算:{
config(){
返回Object.assign({},this.defaults,this.options)
},

这当然不会更新启用日期选项,因为道具是不可变的,我需要访问wrapped by vue flatpickr组件的
set(option,value)
部分。但是,我的vue功夫不够强大,无法对其进行源代码潜水,以查看如何访问它,并通过编程调用
set('enabled'),[新日期]
有时候,你不应该在累了的时候编码:)但希望这会在某个时候对某人有所帮助。我想得太多了。数据是通过道具传递的,如果控制数据的变化,它必须反映在传播的数据中。很像v-model的值道具

因此,与其绑定this.options上的config对象(该对象不与初始化它的prop值保持挂钩),不如从prop计算计算函数,该prop将根据新传入的options prop进行更改

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


计算:{
config(){
返回Object.assign({},this.defaults,this.externalOptions)
},
并删除数据元素

…基本的


抱歉,时间太晚了,我感到松了一口气。

有时候,你不应该在累了的时候编写代码:)但希望这会在某个时候对某人有所帮助。我想得太多了。数据是通过道具传递的,如果控制数据发生变化,它必须反映在传播的数据中。很像v-model的值道具

因此,与其绑定this.options上的config对象(该对象不与初始化它的prop值保持挂钩),不如从prop计算计算函数,该prop将根据新传入的options prop进行更改

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


计算:{
config(){
返回Object.assign({},this.defaults,this.externalOptions)
},
并删除数据元素

…基本的


很抱歉,奶酪太晚了,我感到松了一口气。

谢谢你的编辑@nnnmmm,这样读起来更好。我不知道如何提高投票率,也不知道如何传递花费时间的分数。谢谢你的道具(双关语):)谢谢你的编辑@nnnmmm,这样读起来更好。我不知道如何提高投票率,也不知道如何传递花费时间的分数。谢谢你的道具(双关语):)