动态渲染下拉菜单vue.js

Question

我正在从服务器加载一些数据，然后尝试使用 Vue.js for 循环将

dimensionscodes

加载到下拉列表中。

但是当我尝试从第一行的下拉列表中选择某些内容时，它将用该值更新所有其他下拉列表，如下所示：

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

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>

Answer 1

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

事情是这样的

下拉.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,
     }
 ...

Answer 2

我发现我应该使用

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>

Answer 3

问题是，

selecteddimensioncode

中的每个项目都使用相同的

dimensionscodes

。 在您的代码中，我们可以添加一个属性 -

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

在您的 html 中，我们可以更改 -

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

这应该按预期工作。