Javascript 动态呈现下拉列表vue.js

我正在从服务器加载一些数据，然后尝试使用Vue.js for循环将维度代码加载到下拉列表中

但当我尝试从第一行的下拉列表中选择某个内容时，它将使用该值更新所有其他下拉列表，如您在此处看到的：

我怎样才能避免这种情况？当我从下拉列表中选择某个内容时，只需更新该下拉列表，而不是其他下拉列表

HTML:

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>

---

您对所有下拉列表都使用相同的变量，因此在更新时，它将对所有下拉列表进行更改，我建议为每个下拉列表创建一个单独的组件，而不是创建多个变量

像这样的事情

dropdown.vue HTML Vuejs 从“./dropdown.vue”导入下拉列表； 新Vue{ 组成部分：{ 下拉列表， } ... 我发现我应该使用v-bind:value=selecteddimensioncode而不是v-model=selecteddimensioncode，这样就不会反应并更新所有下拉列表

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

---

您好，由于您对所有下拉列表使用相同的名称selecteddimensioncode，因此在更改其中一个下拉列表时，它将是被动的，并更新所有下拉列表。@YashMaheshwari好的，是否仍有动态设置？！或者我如何更改此行为！请尝试使用Vue.set动态创建数据属性，然后在select optio中使用这些属性纳什。

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

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