[Vuejs]-Vue: How to use prop value inside component template

You can extend their component to add the accept property, but given it’s such a small component, you might be better changing the code provided in the tutorial to add the prop.

Vue adds any non-prop attribute to the root element, so when you do <file-select :accept="application/json,.json"></file-select>, the label is getting that accept added as an attribute, if the input was the root, then that would work as you need.

To learn how to extend components, there’s another alligator.io tutorial on component composition that should help you understand how to achieve this in Vue. However, since the template isn’t ready for this new prop, you’d need to fully override the html.

As mentioned, you can just use their example code to create your own component that takes in an accept prop and uses it in the correct place.
Extending might be more trouble than what is worth, still, good information to have.

You can access the native element of the FileSelect component and manually assign the accept attribute to it.

template:

<file-select ref="fileSelect"></file-select>

js:

mounted() {
    this.$refs.fileSelect.$el.accept = "application/json,.json";
}