Get started - v-model directive

What is Valyrian.js?Installation Hyperscript/JSX Components Lifecycle methodsDirectives

Built in directives v-model Custom directives

Plugin system Router plugin Request plugin Service worker plugin Node plugin Store plugin Hooks plugin Signals plugin

v-model directive

Install

This directive is added by a plugin, and this plugin is available with the main valyrian.js package, so, you only need to add it with the v.usePlugin() method.

require('valyrian.js');
let VModel = require('valyrian.js/plugins/v-model.js');

v.usePlugin(VModel);

Input

let obj = {
  input: ''
};

<input type="text" v-model={[obj, 'input']} />
<p>Message: {obj.input}</p>

Message:

Textarea

let obj = {
  textarea: ''
};

<textarea v-model={[obj, 'textarea']} placeholder="Add some text"/>
<p>Multiline message: {obj.textarea}</p>

Multiline message:

Boolean checkbox

let obj = {
  check: true
};

<input type="checkbox" id="booleanCheckbox" v-model={[obj, 'check']} />
<label for="booleanCheckbox">{obj.check}</label>

true

Non boolean checkbox

let obj = {
  check: ''
};

<input type="checkbox" id="otherTypeCheckbox" value="Hello world" v-model={[obj, 'check']} />
<label for="otherTypeCheckbox"> Message: {obj.check}</label>

Message:

Multiple checkboxes

let obj = {
  check: []
};

<input type="checkbox" id="jack" value="Jack" v-model={[obj, 'check']}/>
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model={[obj, 'check']}/>
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model={[obj, 'check']}/>
<label for="mike">Mike</label>
<br />
<span>Checked names: [{obj.check.join(', ')}]</span>

JackJohnMike Checked names: []

Radio

let obj = {
  radio: ''
};

<input type="radio" id="hello" value="Hello" v-model={[obj, 'radio']} />
<label for="hello">Hello</label>
<input type="radio" id="world" value="World" v-model={[obj, 'radio']} />
<label for="world">World</label>
<br />
<span>Picked value: {obj.radio}</span>

HelloWorld Picked value:

Select

let obj = {
  select: ''
};

<select v-model={[obj, 'select']}>
  <option disabled value="">Select an item</option>
  <option value="D">A</option>
  <option>B</option>
  <option>C</option>
</select>
<span>Selected: {obj.select}</span>

Selected:

Multiple select

let obj = {
  select: []
};

<select v-model={[obj, 'select']} multiple>
  <option value="D">A</option>
  <option>B</option>
  <option>C</option>
</select>
<span>Selected: [{obj.select.join(', ')}]</span>

Selected: []