medium-aws-tutorial-1/notes.md

To Do:

Organise Trilium with the Vue development

• Have a note for tutorials
• Have a note for references (grouped by category)

Once done with this, go through this and the auth0 tutorial and pick out any vue/javascript snippets into their own trilium note.

Notes

Vuetify

Forms https://vuetifyjs.com/en/components/forms

To make a form you define a v-model of valid in the <v-form>. lazy-validation will set this to true unless there are visible validation errors.

<v-form v-model="valid" ref="form" lazy-validation="">

The v-form component has three functions that can be access by setting a ref on the component.

• this.$refs.form.validate()
• this.$refs.form.reset()
• this.$refs.form.resetValidation()

Validation is easy: https://vuetifyjs.com/en/components/forms/#usage

Custom rules can be done: https://vuetifyjs.com/en/components/forms/#creating-rules

When the submit() event is made, this.$refs.form.validate() will check the form.

v-model is used to bind data 2 ways to the form and the data instance in vue.

https://vuejs.org/v2/guide/forms.html

v-text-fields are used to render inputs in a form.

https://vuetifyjs.com/en/components/text-fields/

Using : before a prop means that the prop is dynamic and the value of it contains javascript.

:append-icon="passwordVisible ? 'visibility' : 'visibility_off'"

Here this is saying that append-icon takes a dynamic value. We are using the ? : syntax - conditional ternary operator. This is short for a if then else.

Available icons are (with mdi- prefix) https://materialdesignicons.com/ or https://material.io/resources/icons/?style=baseline

Double bang notation

The notation !!variable is double bang notation https://medium.com/better-programming/javascript-bang-bang-i-shot-you-down-use-of-double-bangs-in-javascript-7c9d94446054

It returns the variable truthy value. I.e if it's a string with a value it will be true. This is similar to doing variable.__bool__ in python.

When writing inputs you can create custom rules.

For example: (in the computed)

passwordRules() {
    return {
    required: value => !!value || 'Required.',
    min: v => v.length >= 8 || 'Min 8 characters',
    emailMatch: () => ('The email and password you entered don\'t match'),
    }
},

For a <v-text-field:

<v-text-field
  v-model="password"
  :append-icon="passwordVisible ? 'visibility' : 'visibility_off'"
  :rules="[passwordRules.required, passwordRules.min]"
>
</v-text-field>

The value of the field will be passed to the method passwordRules() and passed into the function inside it. This way, we can verify that the value exists (using double bang notation) and that it has a minimum length.

Events on the input can be defined using the following syntax: @click:append="passwordVisible = !passwordVisible" This event (each event is documented in the Vuetify docs) will trigger when you click on the append icon you defined.

You can write regex in javascript by placing it between two slash's. They are useful with arrow notation to check if something matches a regex. v => /.+@.+/.test(v) || 'E-mail must be valid.'

Backtick strings is javascript's version of f-strings in python. You can then access variables with ${} notation:

console.log(
          `SIGN UP username: ${this.username}, password: ${this.password}, email: ${this.username}`
        )

You can write an if block like you would a function:

if (this.$refs.form.validate()) {
}

You can also follow this with an else (aligned with the end of the if block)

if (condition) {
  //  block of code to be executed if the condition is true
} else {
  //  block of code to be executed if the condition is false
}

You can also use the conditional ternary notation of condition ? true_action : false_action

Computed (properties and watchers) https://stackoverflow.com/a/44350932

With computed you are creating getters/setters. You do this by writing the function in the computed directive. Here we have written a computed property for emailRules() - we are using this function to check input on a form is correct.

The main difference between computed and a method is that computed will cache automatically. It will only update, if the value updates. Everytime you call it it will use its cache. Expensive operations can be done this way.

Remember: anything in data you can access in the <script> with $this.var. In the html you can access the var name directly {{var}}

Watchers https://vuejs.org/v2/guide/computed.html#Watchers

The watch directive can be used to watc variables in the component. You create a function that is the same name as the variable you want to watch. This function should take two arguments: new and old. (You can use this to compare inputs for exmaple).

There is a good example of using this functionality to do an ajax call (with rate limiting) in the documentation for watches above.

Sending form data to an api

You can check the form is in a valid state by doing this.$refs.form.validate()

You can then access each component of the form to the variable you defined in the v-model attribute.

<v-text-field v-model="username" /> can be accessed with this.username.

Remember that the variable defined in the v-model has to be defined in the data.

Usage of $this

The following (under the "No separate this" header) explains well. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

When you write a function and define a variable, you might want to write another function inside. If you use $this inside the second function, you will find it is bound to the global scope, not the parent function!

To fix this behaviour, you should close over the variable $this:

function Person() {
  var that = this;
  that.age = 0;

  setInterval(function growUp() {
    // The callback refers to the `that` variable of which
    // the value is the expected object.
    that.age++;
  }, 1000);
}

This is similar to "closure" in python.