CreateNoteModal.html

<form action="">
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Create {{gistsSelected ? 'gist' : 'note'}}</p>
      <h2 class="text-red" v-if="displayDupError">Oh sorry, you can't have duplicated name in your note files...</h2>
    </header>

    <section class="modal-card-body">
      <b-field v-if="!gistsSelected" horizontal label="Name">
        <b-input
          type="text"
          ref="noteName"
          v-model="note.name"
          placeholder="Your note name">
        </b-input>
      </b-field>

      <b-field horizontal label="Description">
        <b-input
          type="text"
          ref="noteDescription"
          v-model="note.description"
          placeholder="Your description">
        </b-input>
      </b-field>

      <b-field v-if="!gistsSelected" horizontal label="Tags">
        <b-taginput
          v-model="note.tags"
          maxtags="5">
        </b-taginput>
      </b-field>

      <b-field v-if="gistsSelected" horizontal label="Visibility">
        <b-select placeholder="Select a visibility" v-model="note.public">
          <option :value="false">Secret</option>
          <option :value="true">Public</option>
        </b-select>
      </b-field>

      <div class="note-file" v-for="file in files">
        <b-field horizontal label="Name" grouped>
          <b-input
            style="width: 186px"
            type="text"
            v-model="file.name"
            placeholder="Your file name">
          </b-input>
          <p class="control is-pulled-right" v-if="files.length > 1">
            <button class="button is-danger" @click="deleteFile(file)">
              <b-icon icon="trash"></b-icon>
            </button>
          </p>
        </b-field>

        <b-field horizontal label="Language">
          <v-select style="width: 186px" label="name" :options="sortedLanguagesByUse" placeholder="Select a language"
             v-model="file.language" :reduce="selectedLanguage => selectedLanguage.name">
             <template v-slot:option="option">
               {{ option.name | capitalize }}
             </template>
          </v-select>
          <b-button pill v-for="languageTag in sortedLanguagesByUse.slice(0,3)"  :style="'background-color: ' + stringToColour(languageTag.name) + '; color: #fff;'"
               :key="languageTag.name" @click="file.language = languageTag.name">{{languageTag.name}}</b-button>
        </b-field>

        <b-field horizontal label="Content">
          <editor v-model="file.content"
                  :lang="file.language"
                  theme="monokai"
                  width="100%"
                  height="260"
          ></editor>
        </b-field>
      </div>

      <div class="text-center">
        <button class="button" type="button" @click="addFile()" v-if="files.length < 5">
          <b-icon id="plus" icon="plus"></b-icon>
          Add a file
        </button>
      </div>
    </section>

    <footer class="modal-card-foot">
      <button class="button" type="button" @click="$parent.close()">Cancel</button>
      <button class="button is-primary" type="button" :disabled="isDisabled" @click="createNote()">Create</button>
    </footer>
  </div>
</form>