add a template ref
This commit is contained in:
parent
4576b66f67
commit
67d24d3e38
|
@ -6,7 +6,9 @@
|
||||||
<div>
|
<div>
|
||||||
<input type="text" placeholder="First Name" v-model="user.firstName" />
|
<input type="text" placeholder="First Name" v-model="user.firstName" />
|
||||||
<input type="text" placeholder="Last Name" v-model="user.lastName" />
|
<input type="text" placeholder="Last Name" v-model="user.lastName" />
|
||||||
|
<input type="text" placeholder="Last Name" ref="lastNameInput" />
|
||||||
</div>
|
</div>
|
||||||
|
<button @click="setLastName">Change Lastname</button>
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -23,6 +25,7 @@ export default {
|
||||||
|
|
||||||
const userAge = ref(23);
|
const userAge = ref(23);
|
||||||
const userName = ref('Muster');
|
const userName = ref('Muster');
|
||||||
|
const lastNameInput = ref(null);
|
||||||
|
|
||||||
watch([userAge, userName], function(newValue, oldValue) {
|
watch([userAge, userName], function(newValue, oldValue) {
|
||||||
console.log('old age: ', oldValue[0]);
|
console.log('old age: ', oldValue[0]);
|
||||||
|
@ -39,9 +42,15 @@ export default {
|
||||||
user.age = '25';
|
user.age = '25';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function setLastName() {
|
||||||
|
user.lastName = lastNameInput.value.value;
|
||||||
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
user,
|
user,
|
||||||
setAge
|
setAge,
|
||||||
|
setLastName,
|
||||||
|
lastNameInput
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
Reference in New Issue