vue.js populate 2 dropdowns from json data

Question

In my third exercise, I have a json file that contains info about cars and their models. I am trying to populate 2 dropdowns from that file:1 for cars and the corresponding models in the other dropdown but not able to do that.

In the models dropdown that I did below, i see some null elements! (maybe corresponding of a place occupied in previos selection). I would like to have the models dropdown always have the first item by default. Thanks for help.

json file data:

[
  {"name": "Abarth",
   "models": [
      {"name": "124 Spider", "series": null},
      {"name": "500", "series": null},
    ]
  },
  {"name": "Acura", 
   "models": [
      {"name": "MDX", "series": null},
      {"name": "NSX", "series": null},
      {"name": "RL", "series": null},
      {"name": "RSX", "series": null},  
    ]
  },
]

My Code:

<template>
  <div>
    Make:<select @change="switchView($event, $event.target.selectedIndex)">
      <option
        v-for="(item, index) in logitems"
        :key="index"
        v-bind:value="this.selected"
      >
        {{ item.name }}
      </option>
    </select>

    Model:<select>
      <option
        v-for="(item, index1) in logitems"  
        :key="item"
      >
        {{ logitems[selectedIndex].models[index1]}} //not able to get the name !
      </option>
    </select>
  </div>
</template>


<script>
import logs from "../assets/car-makes.json";
export default {
  data() {
    return {
      logitems: logs,
      selectedIndex: "0",
     
      selected: {
        name: "Abarth",
        models: [
          {
            name: "124 Spider",
            series: null,
          },
          {
            name: "500",
            series: null,
          },
        ],
      },
    };
  },

  methods: {
    switchView: function (event, selectedIndex) {
      console.log(event, selectedIndex);
      this.selectedIndex = selectedIndex;
    },
    
  },


};
</script>

Nikola Pavicevic · Accepted Answer · 2021-10-01 16:58:06Z

1

Try like following snippet:

new Vue({
  el: '#demo',
  data() {
    return {
      logitems: [
        { name: "Abarth", 
          models: [{name: "124 Spider", series: null}, {name: "500", series: null},]
        },
        { name: "Acura", 
          models: [{name: "MDX", series: null}, {name: "NSX", series: null},
             {name: "RL", series: null }, {name: "RSX", series: null },]
        },
      ],  
      selected: {
        name: 'Abarth',
        model: ''
      }
    };
  },
  computed: {
    models(){
      return this.logitems.filter(l => l.name === this.selected.name)
    }
  },
  methods: {
    clearModel() {
      this.selected.model = this.logitems.find(l => l.name === this.selected.name).models[0].name
    }
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div>
    Make:<select v-model="selected.name" @change="clearModel">
      <option
        v-for="(item, index) in logitems"
        :key="index"
        :value="item.name"
      >
        {{ item.name }}
      </option>
    </select>

    Model:<select v-model="selected.model">
      <option
        v-for="(item, i) in models[0].models" :key="i">
        {{ item.name }} 
      </option>
    </select>
    
    <p>{{ selected }}</p>
  </div>
</div>

edited Oct 1, 2021 at 16:58

answered Sep 29, 2021 at 20:23

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Naim R. Over a year ago

Thanks Nikola, I am trying to show what the user has selected: I tried:<p>you select :{{ this.selected }}-{{ this.model1 }}</p> ; where model1 ="124 Spider" after binding it to Model, and i used watch but not working. Any idea ?

Naim R. Over a year ago

Thanks Nikola it works, but is there a solution around the first item to be no blank(in Model Dropdown) when changing the make dropdown ?

Nikola Pavicevic Over a year ago

You are welcome, sure I updated answer check now pls :)

Naim R. Over a year ago

Thanks Nikola, you amaze me ! how many light years needed to get to your level ? lol

Collectives™ on Stack Overflow

vue.js populate 2 dropdowns from json data

My Code:

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

My Code:

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related