rendering dropdown dynamically vue.js

Question

I'm loading some data from server and than try to load dimensionscodes into Dropdown list using a Vue.js for-loop.

But when i try to select something from dropdown in first row , it will update all other dropdown list with that value, as you see here:

How can i avoid this ? when i choose something from dropdown just update that dropdown not the others.

HTML:

<div id="app">
    <table id="tbl" style="display:none;" class="table">
        <thead>
            <tr>
                <th>Varenummer</th>
                <th>Beskrivelse</th>
                <th>Kategorier</th>
            </tr>
        </thead>
        <tbody id="tblitems">
            <tr v-for="product in products">
                <td>
                    {{product.varenummer}}
                </td>
                <td>
                    {{product.description}}
                </td>
                <td>
                    <select  class="dropdown" v-model="selecteddimensioncode">
                        <option  value="">-- Vælg --</option>
                        <option v-for="code in dimensionscodes" :key="code.value" :value="code.value">{{code.text}}</option>
                    </select>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Vue.js

<script>
   new Vue({
        el: '#app',
        data() {
            return {
                products: [],
                dimensionscodes: [],
                invoicenumber: '',
                selecteddimensioncode: ''
            };
       },
        methods: {
            fetchVarenummer: function () {
        $.ajax({
            "url": '@Url.Action("xxx", "xxx")',
            "method": "GET",
            "data": { "invoicenumber": this.invoicenumber },
            success: result => {
             
              $("#tbl").show();
                this.products = result.products;
                this.dimensionscodes = result.dimensionscodes;
            },
            error: result => {
                console.log(result);
            }
            });

            }
       }
    })
</script>

Hi, as you are using the same name selecteddimensioncode for all the dropdowns, it will be reactive and update all the dropdowns when changing one. — Yash Maheshwari
– Yash Maheshwari, Commented May 10, 2021 at 12:47
@YashMaheshwari alright, is there anyway make it dynamically '?! or how can i change this behavior! — The Professor and the Madman
– The Professor and the Madman, Commented May 10, 2021 at 14:06
Try using Vue.set to dynamically create the data property and then use those properties in select options. — Yash Maheshwari
– Yash Maheshwari, Commented May 10, 2021 at 14:47

The Professor and the Madman · Accepted Answer · 2021-05-14 08:18:46Z

2

I find out i should use v-bind:value="selecteddimensioncode" instead of v-model="selecteddimensioncode" in this way its not going to reactive and update all dropdown.

<select class="dropdown" v-bind:value="selecteddimensioncode">
 <option value="">-- Vælg --</option>
 <option v-for="(code, index) in dimensionscodes" :key="index" :value="code.value">{{code.text}}</option>
</select>

answered May 14, 2021 at 8:18

The Professor and the Madman

1994 silver badges17 bronze badges

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

Comments

Yash Maheshwari · Accepted Answer · 2021-05-10 14:21:23Z

You are using the same variable for all of your dropdown so on update it will change them all, I would recommend making a separate component for each dropdown ( instead of making more than one variable ) ,

goes somthing like this

dropdown.vue

<template>
  <select  class="dropdown" v-model="selecteddimensioncode" @change="handle">
       <option  value="">-- Vælg --</option>
       <option v-for="code in dimensionscodes" :key="code.value" 
                          :value="code.value">{{code.text}}</option>
  </select>
</template>

<script>
export default {
     props : ['dimensionscodes'] ,
     data(){
        return {
            selecteddimensioncode : '' 
        }
     }
     methods : {
      handle() {
         if(this.selecteddimensioncode) this.$emit('selected' , this.selecteddimensioncode); 
    }   

  }

}
</script>

HTML

<td>
   <dropdown :dimensionscodes="dimensionscodes" @selected="doSomthing" />
</td>

Vuejs

<script>
 import dropdown from './dropdown.vue';
   new Vue({
      components : {
          dropdown,
     }
 ...

Ariful Islam · Accepted Answer · 2024-09-28 17:49:05Z

0

The problem is, same selecteddimensioncode is used for each item in dimensionscodes. in you code, we can add a property -

  success: result => {             
          $("#tbl").show();
            this.products = result.products;
            this.dimensionscodes = result.dimensionscodes.map(item => {
                   item.selecteddimensioncode = ''; 
                   return item;
            });
        }

And in your html, we can change -

<select  class="dropdown" v-model="product.selecteddimensioncode">

This should work as expected.

answered Sep 28, 2024 at 17:49

Ariful Islam

1

Collectives™ on Stack Overflow

rendering dropdown dynamically vue.js

3 Answers 3

Comments

dropdown.vue

HTML

Vuejs

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

dropdown.vue

HTML

Vuejs

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related