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>

{{1}}

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中的动态属性选择-先前的选择为空白

1 个答案: