如何将 prop 的属性映射到 Vue 的属性中

Question

我的组件里面有很多属性想设置，但是第一段代码就这么臃肿，不知道有没有更好的解决办法

<li class="ui-draggable-handle"
   v-for="(item, index) in deviceList" 
   :key="index"  
   :appid="item.subjectId" 
   :apptype="item.appType" 
   :model="item.subjectModel" 
   :shortModel="item.shortModel" 
   :appname="item.subjectName" 
   :state="item.state">

<my-li class="ui-draggable-handle"
   :mapping="{
      'appid': 'subjectId',
      'apptype': 'appType',
      'model': 'subjectModel',
      'shortModel': 'shortModel',
      'appname': 'subjectName',
      'state': 'state',
   }">

那么如何映射 in 的属性

Answer 1

v-bind可以使用一个对象同时绑定多个属性/道具。该指令的值可以是对象文字：

<li
   v-for="(item, index) in deviceList"
   v-bind="{
      'appid': item.subjectId,
      'apptype': item.appType,
      'model': item.subjectModel,
      'shortModel': item.shortModel,
      'appname': item.subjectName,
      'state': item.state,
   }">

...或对象变量，其中仅映射适用的键（忽略不存在的属性/道具）：

<li
   v-for="(item, index) in deviceList" 
   v-bind="item">