Show / Hide Table of Contents
Fork me on GitHub

Vue binding

Important:

Vue binding will be automatically applyed inside an HTML element with the main id.
So all HTML depending on vue should be wrapped inside a main div:

<div id="main">
   <!-- Your vue logic here -->
</div>

See Complete Example: Example.ChromiumFX.Vue.UI

Vue binding is provided by the Neutronium.JavascriptFramework.Vue assembly that exposes the following injectors:
For Vue.js 1.0: VueSessionInjector registered name VueInjector
For Vue.js 2.0: VueSessionInjectorV2 registered name VueInjectorV2

Given the following ViewModel:

public class Skill
{
	public string Type { get;}
	public string Name { get;}

	public Skill (string name, string skillType)
	{
		Name = name;
		Type = skillType;
	}
}

public class Person: ViewModelBase
{
	private string _Name;
	public string Name
	{
		get { return _Name; }
		set { Set(ref _Name, value, "Name"); }
	}

	private Skill _MainSkill;
	public Skill MainSkill
	{
		get { return _MainSkill; }
		set { Set(ref _MainSkill, value, "MainSkill"); }
	}
	   
	public IList<Skill> Skills { get; private set; }
	public ICommand RemoveSkill { get; private set; }
 	public ICommand AddSkill { get; private set; }
	
	public Person()
	{
		Skills = new ObservableCollection<Skill>();
		RemoveSkill = new RelayCommand<Skill>(s=> this.Skills.Remove(s));
		AddSkill = new RelayCommand(_ => this.Skills.Add(new Skill("Vue.js", "javascript"));
	}	  
}

Bind to a property:

<span>{{Name}}</span>

Bind to a nested property:

<span>{{Skill.Name}}</span>

Bind to a Collection:

<div v-for:"skill in Skills" :key="skill.Name">{{skill.Name}}</div>

Bind to a Command:

Recommended way to use Neutronium is to use the vue-cli and vue-mixin-command to bind with command. But it is possible to use low level API to bind with command:

<button @:click:"RemoveSkill.Execute(skill)"></button>

Using command mixin:

When using the vue-cli 3 plugin template vue-cli-plugin-neutronium which is the recommended tool when building mid or large scale Neutronium application (reference here).

Install:

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

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>

Using buttonCommand:

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

Advanced: IResultCommand support

Neutronium provides binding to IResultCommand making possible to call a C# function returning a Task from javascript and receiving the response as a promise.

Npm module neutronium-vue-resultcommand-topromise is an helper to obtain promise from resultCommand on the javascript side.

Example:

To bind to C# ResultCommand property:

public class ViewModel
{
    public IResultCommand ResultCommand {get;} 
    
    public ViewModel()
    {
        ResultCommand = RelayResultCommand.Create<string, int>(Count);
    }

    private int? Count(string routeName)
    {
       return routeName?.Lenght;
    }
}

Do on javascript side:

import {toPromise} from 'neutronium-vue-resultcommand-topromise'

const promise = toPromise(viewModel.ResultCommand, 'countLetterNumber');
promise.then((ok)=>{
     //Ok code
 }, (error) =>{
 //Error handling
})
  • Improve this Doc
Back to top Generated by DocFX