[Vuejs]-Understanding undocumented Vue.js attributes ( Vue + Pug )

by

2👍

✅

The : in front of html attributes is a shorthand for the v-bind directive. what v-bind allows you to do is have a variable value to the specified html attribute.
ex: v-bind:alt="kittenPhotoDescription" is the same as doing alt:"kittenPhotoDescription".

Here is where it’s found in the docs.

👤Leviathan_the_Great

1👍

I don’t know Pug well, but it seems to me that the pasted Pug code creates a menu-dropdown element with those given attributes. right attribute is bound to a dynamic value from the Vue model using the v-bind: directive’s shorthand :.

I searched for menu-dropdown component’s definition in the repository you linked, and find this file:
https://github.com/HabitRPG/habitica/blob/develop/website/client/components/ui/customMenuDropdown.vue

This is where the right attribute is defined as a Vue prop:

<script>
export default {
  props: {
    right: Boolean,
    ...

You can read more about props in the Vue documentation.

👤juzraai

Leave a comment