如何动态绑定到组件内的对象属性？答案

【问题标题】：How to dynamically bind to object property inside component?如何动态绑定到组件内的对象属性？
【发布时间】：2019-04-29 15:08:17
【问题描述】：

我正在尝试制作一个 Vue.js 检查列表组件：

会这样使用：

<check-list :items="myItems" text-property="name" />

定义：

<template>
  <div class="form-control item-container">
    <div class="custom-control custom-checkbox mr-sm-2" v-for="item in items" :key="item.value">
      <input type="checkbox" class="custom-control-input" :id="item.value">
      <label class="custom-control-label" :for="item.value">{{item[item.textProperty]}}</label>
    </div>
  </div>
</template>

我不想硬编码text 属性。如何传入属性名称以用作参数，然后在模板中动态绑定？

在我上面的示例中，这个{{item[item.textProperty]}} 理想情况下应该自动绑定到item['name']。

我想避免使用 javascript。

【问题讨论】：

应该是{{ item[textProperty] }}
@fabruex 非常感谢！

标签： vue.js data-binding vue-component

【解决方案1】：

应该是：

{{ item[textProperty] }}

属性名称中没有item

【讨论】：