Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Handle Forms Connected to a Vuex Store using TypeScript

    Alex Jover MoralesAlex Jover Morales

    v-model uses 2 way binding to make local state easy to update and connect variables to an input or component, in an implicit way. At the same time, that makes it difficult to combine it with Vuex, since getters and mutations/actions must be called explicitly.

    This lesson shows you how you can apply the v-model functionality to a Vuex store by doing it in explicitly in 2 steps on a class-based component using TypeScript.

    vueVue.js
    typescriptTypeScript
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    We're going to implement the check feature for the to-dos. For that, let's try view model. First go here and write an input checkbox. Same view model equal to-do checked. Fix the indentation. Let's copy this input back, and paste it further down this list. Then change the view model to done.

    Let's try this. Click on the checkboxes, and you see they are changing. We may think this is working correctly, but if we check the state, let's check for example the getters. The state doesn't change at all. This is because view model is changing the local state of that variable. What we want to do is to trigger a motation.

    Go to the to-dos file, where we have the motations, and add toggle to-do. Then the only thing we have to do is to invert the checked property. Now, we need to go back to the app view component, and declare the toggle to-do motation.

    What we have to do is, instead of using view model, do it in two steps. First, let's use the checked property to bind that value. Then use the change event to call the motation. In this way, we are replicating the view model functionality, but by controlling ourselves how to get the data from, and what to do to change it.

    Don't forget to update the DOMs list. Let's try this again. Scroll down to the getters, and then click the checkboxes, and we'll see the state is changing. This is working as we expect.

    Discuss

    Discuss