Динамический выбор атрибута в Vue - предыдущий выбор становится пустым

Question

Данные атрибутов поступают из API, а имена атрибутов являются динамическими, однако, чтобы упростить этот пример, я привел пример с объектом, который имеет Colour и Size.В первую очередь я пытался сопоставить данные с объектом selectedAttrObj, что не вызывает проблем, однако, когда выбираются вторые наборы атрибутов (Size), первый (Colour) становится пустым.Это должно быть связано с тем, что первый 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>