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

Question

属性数据来自 API 并且属性名称是动态的，但是为了使这个示例更简单，我放置了一个包含 Colour 和 Size 对象的示例。我主要尝试将数据映射到对象 selectedAttrObj - 这没有问题，但是当选择第二组属性 (Size) 时，第一组属性 ( >颜色)正在变成空白。这一定是由于选择第二组时第一个 v-model="selected" 被覆盖。这是一种视觉体验，以及我如何确保第一个选择与所选选项保持一致。请不要尝试硬编码，因为可能有无数个属性，因此它需要是动态的(因此对所有属性使用 selected 的原因)。如果有更好、更简单的方法将所选数据映射到 selectedAttrObj 以避免清空以前的选择，请立即关闭!谢谢

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>