Vue UI Components Documentation

Sets or gets the notation in which to display the real and imaginary parts of the complex number.

'default' - decimal notation, e.g. '330000 - 200i'

'exponential', e.g. '3.3e+5 - 2e+2i'

'scientific', e.g. '3.3x103 - 2x102i'

'engineering', e.g. '330x103 - 200x10oi'

<template>
  <JqxComplexInput ref="myComplexInput"
    :width="250" :height="25" :value="'15 + 7.2i'" :decimalNotation="'exponential'"
  />
</template>
 
<script>
  import JqxComplexInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcomplexinput.vue';
 
  export default {
    components: {
      JqxComplexInput
    }
  }
</script>

Get the decimalNotation property.

let decimalNotation = this.$refs.myComplexInput.decimalNotation;

Enables or disables the jqxComplexInput.

<template>
  <JqxComplexInput ref="myComplexInput"
    :width="250" :height="25" :value="'15 + 7.2i'" :disabled="true"
  />
</template>
 
<script>
  import JqxComplexInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcomplexinput.vue';
 
  export default {
    components: {
      JqxComplexInput
    }
  }
</script>

Get the disabled property.

let disabled = this.$refs.myComplexInput.disabled;

Sets or gets the jqxComplexInput's height.

<template>
  <JqxComplexInput ref="myComplexInput"
    :width="250" :height="25" :value="'15 + 7.2i'"
  />
</template>
 
<script>
  import JqxComplexInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcomplexinput.vue';
 
  export default {
    components: {
      JqxComplexInput
    }
  }
</script>

Get the height property.

let height = this.$refs.myComplexInput.height;

Sets or gets the jqxComplexInput's placeholder.

<template>
  <JqxComplexInput ref="myComplexInput"
    :width="250" :height="25" :value="'15 + 7.2i'" :placeHolder="'Enter a complex number'"
  />
</template>
 
<script>
  import JqxComplexInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcomplexinput.vue';
 
  export default {
    components: {
      JqxComplexInput
    }
  }
</script>

Get the placeHolder property.

let placeHolder = this.$refs.myComplexInput.placeHolder;

Enables or disables the rounded corners functionality. This property setting has effect in browsers which support CSS border-radius.

<template>
  <JqxComplexInput ref="myComplexInput"
    :width="250" :height="25" :value="'15 + 7.2i'" :roundedCorners="false"
  />
</template>
 
<script>
  import JqxComplexInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcomplexinput.vue';
 
  export default {
    components: {
      JqxComplexInput
    }
  }
</script>

Get the roundedCorners property.

let roundedCorners = this.$refs.myComplexInput.roundedCorners;

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

<template>
  <JqxComplexInput ref="myComplexInput"
    :width="250" :height="25" :value="'15 + 7.2i'" :rtl="true"
  />
</template>
 
<script>
  import JqxComplexInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcomplexinput.vue';
 
  export default {
    components: {
      JqxComplexInput
    }
  }
</script>

Get the rtl property.

let rtl = this.$refs.myComplexInput.rtl;

Shows or hides the spin buttons.

Note: the spin buttons require an additional empty div element in the initialization div of jqxComplexInput.

<template>
  <JqxComplexInput ref="myComplexInput"
    :width="250" :height="25" :value="'15 + 7.2i'" :spinButtons="true"
  />
</template>
 
<script>
  import JqxComplexInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcomplexinput.vue';
 
  export default {
    components: {
      JqxComplexInput
    }
  }
</script>

Get the spinButtons property.

let spinButtons = this.$refs.myComplexInput.spinButtons;

Sets or gets the increase/decrease step.

<template>
  <JqxComplexInput ref="myComplexInput"
    :width="250" :height="25" :value="'15 + 7.2i'" :spinButtons="true" :spinButtonsStep="10"
  />
</template>
 
<script>
  import JqxComplexInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcomplexinput.vue';
 
  export default {
    components: {
      JqxComplexInput
    }
  }
</script>

Get the spinButtonsStep property.

let spinButtonsStep = this.$refs.myComplexInput.spinButtonsStep;

Determines the template as an alternative of the default styles.

'default' - the default template. The style depends only on the "theme" property value.

'primary' - dark blue style for extra visual weight.

'success' - green style for successful or positive action.

'warning' - orange style which indicates caution.

'danger' - red style which indicates a dangerous or negative action.

'info' - blue button, not tied to a semantic action or use.

<template>
  <JqxComplexInput ref="myComplexInput"
    :width="250" :height="25" :value="'15 + 7.2i'" :template="'primary'"
  />
</template>
 
<script>
  import JqxComplexInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcomplexinput.vue';
 
  export default {
    components: {
      JqxComplexInput
    }
  }
</script>

Get the template property.

let template = this.$refs.myComplexInput.template;

Sets the widget's theme.

• Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'material' theme.

  
                                  
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.material.css" type="text/css" /> 
                                  

• Set the widget's theme property to 'material' when you initialize it.

<template>
  <JqxComplexInput ref="myComplexInput"
    :width="250" :height="25" :value="'15 + 7.2i'" :theme="'material'"
  />
</template>
 
<script>
  import JqxComplexInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcomplexinput.vue';
 
  export default {
    components: {
      JqxComplexInput
    }
  }
</script>

Sets or gets the value of the jqxComplexInput widget.

<template>
  <JqxComplexInput ref="myComplexInput"
    :width="250" :height="25" :value="'190 - 17i'"
  />
</template>
 
<script>
  import JqxComplexInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcomplexinput.vue';
 
  export default {
    components: {
      JqxComplexInput
    }
  }
</script>

Get the value property.

let value = this.$refs.myComplexInput.value;

Sets or gets the jqxComplexInput's width.

<template>
  <JqxComplexInput ref="myComplexInput"
    :width="250" :height="25" :value="'15 + 7.2i'"
  />
</template>
 
<script>
  import JqxComplexInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcomplexinput.vue';
 
  export default {
    components: {
      JqxComplexInput
    }
  }
</script>

Get the width property.

let width = this.$refs.myComplexInput.width;

This event is triggered when the value is changed.

Code examples

Bind to the change event of jqxComplexInput.

<template>
  <JqxComplexInput ref="myComplexInput" @change="onChange($event)"
    :width="250" :height="25" :value="'15 + 7.2i'"
  />
</template>
 
<script>
  import JqxComplexInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcomplexinput.vue';
 
  export default {
    components: {
      JqxComplexInput
    },
    methods: {
      onChange: function (event) {
        alert('do something...');
      }
    }
  }
</script>

Destroys the widget.

<template>
  <JqxComplexInput ref="myComplexInput"
    :width="250" :height="25" :value="'15 + 7.2i'"
  />
</template>
 
<script>
  import JqxComplexInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcomplexinput.vue';
 
  export default {
    components: {
      JqxComplexInput
    },
    mounted: function () {
      this.$refs.myComplexInput.destroy();
    }
  }
</script>

Gets the real part of the entered number.

<template>
  <JqxComplexInput ref="myComplexInput"
    :width="250" :height="25" :value="'15 + 7.2i'"
  />
</template>
 
<script>
  import JqxComplexInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcomplexinput.vue';
 
  export default {
    components: {
      JqxComplexInput
    },
    mounted: function () {
      const value = this.$refs.myComplexInput.getReal();
    }
  }
</script>

Gets the imaginary part of the entered number.

<template>
  <JqxComplexInput ref="myComplexInput"
    :width="250" :height="25" :value="'15 + 7.2i'"
  />
</template>
 
<script>
  import JqxComplexInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcomplexinput.vue';
 
  export default {
    components: {
      JqxComplexInput
    },
    mounted: function () {
      const value = this.$refs.myComplexInput.getImaginary();
    }
  }
</script>

Renders the widget.

<template>
  <JqxComplexInput ref="myComplexInput"
    :width="250" :height="25" :value="'15 + 7.2i'"
  />
</template>
 
<script>
  import JqxComplexInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcomplexinput.vue';
 
  export default {
    components: {
      JqxComplexInput
    },
    mounted: function () {
      this.$refs.myComplexInput.render();
    }
  }
</script>

Refreshes the widget.

<template>
  <JqxComplexInput ref="myComplexInput"
    :width="250" :height="25" :value="'15 + 7.2i'"
  />
</template>
 
<script>
  import JqxComplexInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcomplexinput.vue';
 
  export default {
    components: {
      JqxComplexInput
    },
    mounted: function () {
      this.$refs.myComplexInput.refresh();
    }
  }
</script>

Sets or gets the value.

<template>
  <JqxComplexInput ref="myComplexInput"
    :width="250" :height="25" :value="'15 + 7.2i'"
  />
</template>
 
<script>
  import JqxComplexInput from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxcomplexinput.vue';
 
  export default {
    components: {
      JqxComplexInput
    },
    mounted: function () {
      const value = this.$refs.myComplexInput.val();
    }
  }
</script>