Ready to get started?

Join Adocasts Plus for $8.00/mo, or sign into your account to get access to all of our lessons.

Join for $8.00/mo Sign in
robot mascot smiling
Previous
Sign Up to Track Progress
Next

Switching Between Organizations

In this lesson, we'll add the ability for our users to change which of their organizations is their active organization via our organization selector.

Tom Gobich
Author
Tom Gobich
Published
Nov 01, 24
Duration
2m 56s

Developer, dog lover, and burrito eater. Currently teaching AdonisJS, a fully featured NodeJS framework, and running Adocasts where I post new lessons weekly. Professionally, I work with JavaScript, .Net C#, and SQL Server.

Adocasts

Burlington, KY

Visit Website

Get the Code

Download or explore the source code for this lesson on GitHub

Repository

Chapters

00:00 - Handling Our Change Organization Click Event
01:26 - Updating The User's Active Organization
02:37 - Testing Our Organization Change Flow

Ready to get started?

Join Adocasts Plus for $8.00/mo, or sign into your account to get access to all of our lessons.

Join for $8.00/mo Sign in

Join The Discussion! (4 Comments)

Please sign in or sign up for free to join in on the dicussion.

  1. tigerwolf974
    Adocasts Plus Subscriber
    Commented 21 days ago

    Hello,

    I'm resuming the course, and I already have a question—sorry about that!

    For context, I’m using React rather than the Vue.js framework. I don't really know Vue.js, but I noticed that you’re using a watchEffect to keep track of the active organization value.

    At first, I did something similar in React with a useState and a useEffect. However, it feels a bit redundant to me. Why not use the organization value that we receive directly through props to keep the UI updated?

    It would look like this:

    <DropdownMenuRadioGroup
  value={organization.id.toString()} // formerly organizationIdSelected
  onValueChange={onOrganizationChange}
/>
    
  
    
    
    
      Copied!
    1

    Please sign in or sign up for free to reply

    1. tomgobich
      Adocasts Plus Subscriber
      Commented 20 days ago

      Hi tigerwolf974!

      Vue doesn't like direct mutation of prop values, which is why we're setting the organizationId into it's own ref and syncing it with the organization id from our props.

      However, you're right, it is still redundant and could've been done a little more cleanly using the newer toRef Vue method. The end result in data flow would've been similar though.

      Alternatively, we could've not used two-way data binding on the DropdownMenuRadioGroup, however, then our UI wouldn't have immediately updated but rather only updated after we got the response back from the organization switch. Not a huge deal, since the dropdown is auto-closed after selection, but still nice to be able to see the selection bubble change as the dropdown is closing as confirmation that the switch is occurring.

      1

      Please sign in or sign up for free to reply

      1. tigerwolf974
        Adocasts Plus Subscriber
        Commented 7 days ago

        Thank you for your response.

        1

        Please sign in or sign up for free to reply

        1. tomgobich
          Adocasts Plus Subscriber
          Commented 7 days ago

          Anytime!!

          0

          Please sign in or sign up for free to reply