Vue 中的动态属性选择 - 之前的选择被设为空白

Question

属性数据来自 API 并且属性名称是动态的，但是为了使这个示例更简单，我举了一个包含 Colour 和 Size 的对象的示例.我主要是试图将数据映射到一个对象 selectedAttrObj - 这没有问题，但是当第二组属性被 selected (Size) 时，第一组 (Colour) 变成空白。这一定是因为第一个 v-model="selected" 在第二个集合 selected 时被覆盖了。这是一种视觉体验，以及我如何确保第一个 select 与 selected 选项保持一致。请不要尝试硬编码，因为可能有无数的属性，所以它需要是动态的（因此对所有属性使用 selected 的原因）。如果有更好更简单的方法将 selected 数据映射到 selectedAttrObj 以避免消隐以前的 select 离子，请开火！谢谢

function callMe(){
    var vm = new Vue({
        el : '#root',
        data : {
         attributes : {
         "Colour": ["red", "black", "purple"],
         "Size": ["8.0", "8.5", "9.0", "9.5", "10.0"]},
         selectedAttrObj: {},
         selected: ""
         },
         methods: {
          selected_attributes(name, value) {
            this.selectedAttrObj[name] = value
            console.log(this.selectedAttrObj)
          }
         }
    })
}
callMe();

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.11/dist/vue.js"></script>
<div id='root'>
  
    <table>
    <tr>
        <th v-for="(item, key, index) in attributes "> {{ key }}     </th>
    </tr>
    <tr>
       <td v-for="(items, key, index) in attributes">
        <select v-model="selected" @change="selected_attributes(key, selected)">
            <option v-for="name in items"> {{ name }} </option>
        </select>
       </td>
    </tr>
    
</table>
    
  </div>
</div>

Answer 1

您可以将选择的数据变量更改为一个对象，并根据您正在迭代的给定键保存值。

这是一个片段：

function callMe(){
    var vm = new Vue({
        el : '#root',
        data : {
         attributes : {
         "Colour": ["red", "black", "purple"],
         "Size": ["8.0", "8.5", "9.0", "9.5", "10.0"]},
         selected: {}
         }
    })
}
callMe();

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id='root'>
  
    <table>
    <tr>
        <th v-for="(item, key, index) in attributes "> {{ key }}     </th>
    </tr>
    <tr>
       <td v-for="(items, key, index) in attributes">
        <select v-model="selected[key]">
            <option v-for="name in items"> {{ name }} </option>
        </select>
       </td>
    </tr>
    
</table>
    
  </div>
</div>

Vue 中的动态属性选择 - 之前的选择被设为空白

Dynamic attribute selection in Vue - previous selection is being made blank

html

javascript

vue.js

vuejs2