Vue Code

vuerouter.js

// router
this.$router.push({ name: 'analytics' });
this.$router.push({ path: '/path' });
const currentroute = this.$router.currentRoute;
const currentroute = this.$router.currentRoute.path;

@click="(var) ? var=false:var=true"

<template v-html="html_text"></template>

<div v-bind:class="{ classToUse: isActive }"></div>
<div v-bind:class="{ classToUse: var === 'blah' }"></div>

<b-button size="is-small" @click="(showSelectSupplier) ? showSelectSupplier=false:showSelectSupplier=true"><span v-if="showSelectSupplier">Close</span><span v-else>Change</span></b-button>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
</style>

// open a modal
/*
<b-modal :active.sync="isCardModalActive" :width="640" scroll="keep">
  <div class="card modal-card roundedtop roundedbottom">
    <div class="card-header roundedtop bluebg10">
      <div class="card-header-title white">Title</div>
    </div>
    <div class="modal-card-body">
      <div class="content"></div>
    </div>
    <footer class="card-footer roundedbottom">
      <div class="card-footer-item roundedbottomleft isPointer bluebg1 bluetxt8">Cancel</div>
      <div class="card-footer-item roundedbottomright isPointer bluebg10 white txtbold">Save</div>
    </footer>
  </div>
</b-modal>
*/


const that = this; // re-assign the scope so it doesn't intefere with the modals scope

let useFull = true;
let useCanCancel = false;
const inw = document.body.clientWidth;
if (inw > 600) { useFull = false; useCanCancel = true; }
this.modal = this.$buefy.modal.open({
  parent: this,
  component: ModalMapForm,
  hasModalCard: true,
  fullScreen: useFull,
  canCancel: useCanCancel,
  width: 700,
  props: {
    data: {},
  },
  events: {
    dataFromModal: value => {
      console.log('value', value);
    }
  }
});

// call event from modal
this.$emit("dataFromModal", sv.data.row);

this.$buefy.snackbar.open({ message: "Message", position: "is-bottom" });

// toast
this.$buefy.toast.open({ message: "", position: "is-bottom", type: "is-danger" });

// confirm delete
this.$buefy.dialog.confirm({
  title: "",
  message:
  "Are you sure you want to <b>delete</b> this? This cannot be undone.",
  confirmText: "Delete",
  type: "is-danger",
  hasIcon: true,
  icon: 'exclamation',
  onConfirm: () => {}
});

// prompt
this.$buefy.dialog.prompt({
  message: `Please enter a name for this form`,
  inputAttrs: {
    placeholder: "Contact form",
    maxlength: 10
  },
  trapFocus: true,
  onConfirm: value => this.$buefy.toast.open(`Your form is: ${value}`)
});

this.$buefy.snackbar.open({ 
          message: "Restore this log entry?", 
          position: "is-bottom", 
          type: "is-warning", 
          indefinite: true,
          onAction: async () => {
            row.deleted = false;
            row.deletedreason = '';
            const updl = await this.DataSend('put', '/worklog/update', row);
          }
        });