1//HTML
2<div id="vueRoot">
3 <form ref="form">
4 <input name="vitalInformation" v-model="store.vital">
5 <a href="#" v-on:click="submit">SUBMIT</a>
6 </form>
7</div>
8
9//JS
10vm = new Vue({
11 el : "#vueRoot",
12 methods : {
13 submit : function(){
14 this.$refs.form.submit()
15 }
16 }
17});
18
1<input v-model="message" placeholder="edit me">
2<p>Message is: {{ message }}</p>
1<template>
2 <select
3 :class="$options.name"
4 v-model="selected"
5 @change="updateValue"
6 >
7 <option
8 disabled
9 value=""
10 v-text="disabledOption"
11 />
12 <option
13 v-for="option in options"
14 :key="option"
15 :value="option"
16 v-text="option"
17 />
18 </select>
19</template>
20
21<script>
22export default {
23 name: 'FormSelect',
24 model: {
25 // By default, `v-model` reacts to the `input`
26 // event for updating the value, we change this
27 // to `change` for similar behavior as the
28 // native `<select>` element.
29 event: 'change',
30 },
31 props: {
32 // The disabled option is necessary because
33 // otherwise it isn't possible to select the
34 // first item on iOS devices. This prop can
35 // be used to configure the text for the
36 // disabled option.
37 disabledOption: {
38 type: String,
39 default: 'Select something',
40 },
41 options: {
42 type: Array,
43 default: () => [],
44 },
45 value: {
46 type: [String, Number],
47 default: null,
48 },
49 },
50 data() {
51 return {
52 selected: this.value,
53 };
54 },
55 methods: {
56 updateValue() {
57 // Emitting a `change` event with the new
58 // value of the `<select>` field, updates
59 // all values bound with `v-model`.
60 this.$emit('change', this.selected);
61 },
62 },
63};
64</script>