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',
   }">

那我该如何映射属性中的映射

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">

Answer 2

首先，您可以通过绑定整个对象来传递对象的属性作为组件道具，就像the documentation中所述：

<my-li v-bind="item" class="ui-draggable-handle">

由于组件的道具与项目对象的属性不对应，因此您可以像 tony19 的建议中那样传递它们。虽然如果您想让模板看起来更整洁，则可以使用计算属性而不是原始的deviceList。像这样：

computed: {
  deviceListMapped() {
    return this.deviceList.map(item => ({appid: item.subjectId, apptype: item.appType, model: item.subjectModel, shortModel: item.shortModel, appname: item.subjectName, state: item.state}))
  },
}

然后在您的模板中，通过deviceListMapped进行迭代并以v方式绑定其项，如下所示：

<my-li 
  v-for="(item, i) in deviceListMapped"
  :key="i"
  v-bind="item" />

Answer 3

使用类似的计算属性

<my-li class="ui-draggable-handle"
   :mapping="mappingObject">

计算对象设置所有类似的属性

computed: {
    mappingObject() {
      'appid': 'subjectId',
      'apptype': 'appType',
      'model': 'subjectModel',
      'shortModel': 'shortModel',
      'appname': 'subjectName',
      'state': 'state',
   },

Answer 4

我只会在迭代中绑定整个项目对象

<my-li class="ui-draggable-handle"
  v-for="(item, index) in deviceList" 
  :key="index"  
  :item="item">
</my-li>

然后，您可以像这样访问组件内部项目的属性

{{ item.subjectId }}

如何将道具的属性映射到Vue的属性

4 个答案: