> For the complete documentation index, see [llms.txt](https://xml-1.gitbook.io/vuejs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://xml-1.gitbook.io/vuejs/attribute-ref-ok.md).

# Attribute ref (ok)

```
var data = {
	name: "Lionel"
}
Vue.component('xinchao',{
	template: '<p><button v-on:click="changeImage()">Change Image</button><input type="file" ref="refChangeImage"></p>',
	data: function() {
		return {
			data
		}
	},
	methods: {
	  changeImage:function(e) {
	    console.log(this.$refs.refChangeImage.click());
	  },
	},
});
new Vue({
	el: "#app",
	data: {
		
	},
});
```

![](https://3659937222-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzKaxpAhzEszGTfXN0vQI%2Fuploads%2FjGQ43oeBn0VBrIfwVb8W%2FScreenshot_1.png?alt=media\&token=cd4fd101-37a4-46ce-a739-acbb4aef78bb)