How implement dynamic dependent select dropdown with node js, mongoDB and vue js?

user_12389811 0
Viewed 247

I want to implement the dynamic dependent dropdown list with node js, mongoDB and Vue js and I could not figure out where to start (sorry I'm new to this topic), here is my scenario below:

I have 2 dropdown boxes country and state, I want state to change every time accordingly to the selected country enter image description here

so do you have any idea on how to implement this one? Any idea would be appreciate. Thanks.

vue.js express node.js mongodb
1 Answers

I think you should take small steps.

1 - First you need to plan your basic API, I'd not bother at all with the backend at the beggining just start with a simple Vue app this is all you need.

2 - Countries and Cities JSON repository download this, this will be the shape of your API, and import that JSON object directly to your Vuejs app.

Now this is some basic code to give you an idea, you can handle the implementation.

import countries from './countries.json'

const countryNames = Object.keys(countries)

const citiesOfGermany = countries.Germany

3 - Once you have finished the basic frontend, I'd start with Nodejs, setup a basic endpoint and serve this exact JSON. ie: GET /countries

4 - Now make the request from your Vuejs APP to this endpoint.

5 - Finally migrate this JSON file to MongoDB, and replace the json file in your nodejs server with MongoDB implementation.

Good luck!

user_139415880
Related