neutronium vue command mixin

Mixin to integrate MVVM ICommand with vue

Usage

Provide mixin to easily integrate ICommand in vue.js using Neutronium. Component this mixin exposes:

Props

command

Type: Object
Required: true

The property corresponding to the C# command.

arg

Type: Object
Required: false

The argument that will be passed to comand when execute is called.

Computed

canExecute

Type: Boolean

true if Command CanExecute is true.

Method

execute

Call the corresponding command with the argument arg

Events

beforeExecute

Called before calling command execute if CanExecute is true.

The event argument provides two properties:

• arg: Object the command argument,
• cancel: false set it to true to cancel the execution

afterExecute

Called after calling command execute.

The event argument is the command argument.

Example

Declaring buttonCommand component in a .vue file (using semantic ui):

<template>
  <div class="ui button" :class="{'disabled': !canExecute}" @click="execute">   
    <slot></slot>  
  </div>
</template>
<script>
import comandMixin from 'neutronium-vue-command-mixin'

export default {
  mixins:[comandMixin]
}
</script>

<style>
</style>

Using buttonCommand:

<button-command :command="compute" :arg="argument">
    Submit
</button-command> 

Install using npm:

npm install neutronium-vue-command-mixin --save