首页 > 解决方案 > Prop not Reactive 使用 VUE 发送配置

问题描述

我已经开始学习 Vue 并且已经走了很远 :) 但仍然认为自己是初学者。我买了一个基于vue的单页应用模板 Themeforest Template Link

我正在上面构建我的应用程序,它使用FlatPickr

我正在尝试使用 FlatPickr 的启用功能

{
enable: ["2025-03-30", "2025-05-21", "2025-06-08", new Date(2025, 8, 9) ]
}

我问开发人员如何使用它,因为它没有在说明中,所以他回答:

您可以使用该config道具传递所有 Flatpickr 选项。

我有看起来像这样的代码

 <c-flatpickr 
    v-validate="'required'"
    v-model="dateRange"
    :config="enabledDates"
    name="Select Date Range"
    value="" range
  />

enabledDates: function (){

  var data = this.trip.tripsDetails;          
  var options = {
    enable: [],
  };

  for (let i in data){

    options.enable.push(data[i].startingDate);

  }

    return options;

},

我的问题是,如果我静态传递数据它可以工作,所以如果我手动将值放入数组中

var options = {
  enable: ['01-06-2018', '03-06-2018', '06-06-2018'],
};

它可以工作,但如果我尝试动态推送值(根据我上面的代码),它就不起作用。

我究竟做错了什么?

提前感谢您的帮助。

// 这里是代码

data() {
      return {


        trip: new Form({

          //All Trips
          tripsDetails: [],

        }),

        dateRange: undefined,

      }
    },

methods: {

        getData(pageid){

          this.trip.tripsDetails = [];

          axios
            .get('/trip/getTrips',{

              params: {

                equipment_id : this.trip.equipment_id,
                dispatch_id: this.pageid

              }

            })

            .then(response => {

                this.trip.tripsDetails = response.data.data;

                this.loading();

            }).catch(error => {

                this.loading();

                this.errortoast();

            });

        },

标签: vue.js

解决方案


推荐阅读