Handling User Input
You can use the
v-on
directive to attach event listeners:<template>
<Window title="Example" width="400" height="100" margined>
<Box padded>
<Text>Counter: {{ counter }}</Text>
<Button v-on:click="increment">Increment</Button>
</Box>
</Window>
</template>
<script>
export default {
data() {
return {
counter: 0
};
},
methods: {
increment() {
this.counter++;
}
}
}
</script>
When the user clicks the button, the
increment()
method is called.The value of the
v-on
directive can be either the name of a method or an expression, so the above example could also be written as:<Button v-on:click="counter++">Increment</Button>
Events emitted when the value of an input widgets is changed have an argument which specifies the new value. For example:
<template>
<Window title="Example" width="400" height="100" margined>
<Box>
<TextInput v-on:input="print"/>
</Box>
</Window>
</template>
<script>
export default {
methods: {
print( value ) {
console.log( 'The new value is: ' + value );
}
}
}
</script>
You can also use the shorthand syntax by omitting
v-on
and prefixing the attribute name with a @
, for example:<Button @click="increment">...</Button>
You can use the
v-model
directive to create a two-way binding between a data property and an input widget:<template>
<Window title="Example" width="400" height="100" margined>
<Box padded>
<TextInput v-model="text"/>
<Text>{{ text }}</Text>
</Box>
</Window>
</template>
<script>
export default {
data() {
return {
text: 'Edit me'
};
}
}
</script>
When the user edits the text in the TextInput widget, the value of the
text
property is automatically updated. When the text
property in changed by code, the input widget is also updated.The
v-model
directive is actually just a shorthand syntax for an attribute binding and event handling. The example could also be written as:<TextInput v-bind:value="text" v-on:input="text = $event"/>
The
v-model
directive can be used with many different input widgets, including TextInput, TextArea, Combobox, ColorButton, Slider, Spinbox, Checkbox, RadioButtons and DropdownList. In case of a Checkbox, the value of the property is either true
or false
. In case of RadioButtons and DropdownList, the value is the index of the selected radio button or item.Last modified 5yr ago