Skip to content

04 Buttons - v_button...

v_button

Standard button component.

Features:

  • Optional confirmation dialog before action
  • Loading indicator and lock button during action

Notes:

  • To disable button use class xd-disabled

Props:

  • url { type: String, required: true },
  • model Object,
  • confirm { type: Boolean, default: false },
  • confirmtext { type: String, default: "v_modal_confirm_header" },
  • method default: 'post' optional 'get'
  • standard html title, class ...

Events:

  • @updated
JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
Vue.component('v_button', {
  template: `
  <button :data-component="$options.name"  type="button" 
  class="xd-button xd-border xd-border-danger xd-round print-hide" 
  @click="run" tabindex="-1"><slot></slot>
    <span v-if="loading" class="xd-loading" ></span>
  </button>
`,
  props: {
    model: Object,
    url: { type: String, required: true },
    method: { type: String, default: "post" },
    confirm: { type: Boolean, default: false },
    confirmtext: { type: String },
  },
  data() {
    return {
      loading: false,
    };
  },
  methods: {
    run() {
      if (this.loading == false) {
        if (this.confirm) {
          let text= this.confirmtext || this.$t('v_modal_confirm_header');
          if (confirm(text)) {
            this.job();
          }
        }
        else {
          this.job();
        }
      }
    },
    job() {

      this.loading = true;
      if (this.method.toLowerCase() == 'post') {
        this.axpost(this.url, this.model).then((response) => {
          this.$emit('updated', response);

        }).catch((error) => {

        }).finally(() => {
          this.loading = false;
        });
      }
      else if (this.method.toLowerCase() == 'get') {
        this.axget(this.url, this.model).then((response) => {
          this.$emit('updated', response);
        }).catch((error) => {

        }).finally(() => {
          this.loading = false;
        });
      }

    }
  }
});
HTML
1
2
3
<v_button title="hello world" class="xd-button xd-border" url="/api/core/system/ping" @updated="alert($event)">
  Hello
</v_button>