Vuetify by InterTuts - Dailymotion

Here I'm collection guides for Vuetify library. With the Vuetify library we can create easy UI in Vue.js.

Transcript

00:00A social posting tool should include a post-preview feature to help users visualize their content

00:11on different platforms.

00:14I am developing such a tool for my portfolio, and while the preview is currently limited,

00:24it serves as a valuable foundation.

00:30Let's see how it works.

00:54Let's see now the code.

01:06This is my text area, and this is the directive which binds this reactive object, and it's

01:24a property.

01:31I have a reactive object for my post, and it has two fields, image and text.

01:42When I input something in my text area, this field is automatically updated, and if this

01:53field is updated, I have the preview here, and the text is displayed in real-time.

02:15Next, I have even a file input here.

02:30It uploads the image when an image is selected.

02:42If the image is uploaded successfully, I'm using this code to update the post image field,

03:02and the image is updated even in the preview.

03:14If it exists, it is displayed.

03:23If the user clicks on the clear button for image, the post image field is emptied.