Home » vue » Understanding undocumented Vue.js attributes ( Vue + Pug )

Understanding undocumented Vue.js attributes ( Vue + Pug )

Posted by: admin November 26, 2021 Leave a comment

Questions:

So i was just browsing through certain vue.js code HERE. and came across the following code below:

menu-dropdown.task-dropdown(
  v-if="!isRunningYesterdailies",
  :right="task.type === 'reward'",
  ref="taskDropdown",
  v-b-tooltip.hover.top="$t('options')"
)

I don’t quite understand this attribute :right that is inserted in the code ? What is it doing and what is its purpose , i am new to Vue.js , but by looking around a bit i was able to find documentation for the rest of the attributes except this attribute called :right ? Can anybody shed some light on this ?

Answers:

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.

###

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.