javascriptvue.js

rendering dropdown dynamically vue.js


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:

ddlscreenshot

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>

Solution

  • 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>