This content originally appeared on CodeSource.io and was authored by Prince Chukwudire
Vue Refs are instance properties used to make reference to HTML elements in our vue application. In this guide, we will take a look at using $refs in accessing and manipulating DOM elements in vue.
<template>
<div>
<input type="text" ref="test" value="Original Ref" />
<button @click="changeValue" type="button">Change</button>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {
changeValue() {
console.log("original value:", this.$refs.test.value);
this.$refs.test.value = "Changed Ref";
console.log("Changed value:", this.$refs.test.value);
},
},
};
</script>We simply changed the value of the input tag by making reference to it. This is similar to what we would have done with a vanilla script as:document.getElementById('test').innerHTML = "changed Value"
The post Using and understanding $refs in vue appeared first on CodeSource.io.
This content originally appeared on CodeSource.io and was authored by Prince Chukwudire
Prince Chukwudire | Sciencx (2021-02-17T17:37:33+00:00) Using and understanding $refs in vue. Retrieved from https://www.scien.cx/2021/02/17/using-and-understanding-refs-in-vue/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.