In this article, I’ll share with you the solutions I’ve found to a small issue I’ve encountered: using form input elements and the v-model attribute, in scoped slots.
In this article, I’ll share with you the solutions I’ve found to a small issue I’ve encountered: using form input elements and the
v-model attribute, in scoped slots.
_Also available [in french_](https://www.naept.com/blog/champs-de-formulaire-avec-v-model-dans-les-slots-nommes/)
VueJS provides a pretty useful feature to make your code DRY ( Don’t repeat yourself): slots. If you are not aware of what slots are, I’ll give you an example. Dialog box is a good one. A dialog box always behaves the same way. When you open it, it creates a view appearing above the current view. This new view usually has a title, content, and some buttons. And the content could be anything! Some raw text, a form, a picture, a combination of those things, some other things… In this case, would you develop a new dialog box for each sort of content? The answer better be “Hell no!”. And slots would be your tool for the job. You’d create the “frame” component, which would take care of displaying a view over the previous one, and use a slot for the content.
But you probably already know all of that. What this article will be about, is one particular case I’ve had to handle: input elements in slots. Form input elements is a very interesting case because VueJS provides a particular attribute for them:
v-model. An input field using
v-modelcan't work that way
The example I’ll use for this article is a custom dynamic form. Let’s say we want to build a form with input elements like
<textarea> (which are eligible for
v-model). And with each of these control, we want to display a warning if it is empty. One option would be to create two new components based on
<input> for one and
<textarea> for the other, adding this new feature, and then use those two new components in a form. One better option would be to create only one new component, let's call it
FormElement, which would implement this new feature, and would have a slot for the form input element.
Want to Hire VueJS Developer to develop an amazing app? **[Hire Dedicated VueJS Developers](https://hourlydeveloper.io/hire-dedicated-vue-js-developer/ "Hire Dedicated VueJS Developers")** on the contract (time/project) basis providing regular...
With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...
You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...
Build your eCommerce project by hiring our expert eCommerce Website developers. Our Dedicated Web Designers develop powerful & robust website in a short span of time.
This article covers A-Z about the mobile and web app development process and answers your question on how long does it take to develop/build an app.