Changing values inside components

[x7ian]

I am relatively new to Vue and trying to customize the daypasn vuetify plugin. Thanks to Slots I have been able to customize many of the aspects of the plugin. Slots are easy to understand. However what I still dont get quite well is how to change the values of parametes in the inner components. For instance, lets say that Im trying to hide or shoe the edit button inside the Calendar Event Popover component, according to certain conditions in the specific event. Than button is not inside a Slot but it has a v-if condition based in the value of "allowEdit" Heres the code at src/components/CalendarEventPopover.vue:

<v-btn
       v-if="allowEdit"
       color="secondary"
       small absolute bottom left fab icon
       @click="edit">
       <v-icon>edit</v-icon>
     </v-btn>

So to show it or hide it I need to modify the value of allowEdit. How can I modify this value from a custom method at my App.vue component? Also Id like to know if there is any "create" event that triggers when the poover is being created?

[pwnz22]

Better use this vuetify calendar

[ClickerMonkey]

If you look at the source you'll see that is a computed value:

https://github.com/ClickerMonkey/dayspan-vuetify/blob/master/src/components/CalendarEventPopover.vue#L290

You can see in the code it depends on the following props:

• allowEditOnReadOnly
• readOnly

And also the global $dayspan.readOnly variable and the readonly variable that can exist on your event details object.

When it comes to specifying props you can always check out this file:

https://github.com/ClickerMonkey/dayspan-vuetify/blob/master/src/defaults.js#L125

This file lists all the components and their default prop values.

You can overwrite any of the default prop values when you initialize the plugin like so:

Vue.use( DaySpanVuetify, {
  // options is vue definition, the resulting reactive component is stored in components as this.$dayspan or Vue.$dayspan
  data: {
    defaults: {
      dsCalendarEventPopover: {
        allowEditOnReadOnly: false
      }
    }
  }
});

[ClickerMonkey]

And I believe you could also do this.$dayspan.defaults.dsCalendarEventPopover. allowEditOnReadOnly = false if you really wanted to. It would need to be done before the componet is created.