javascript - 基于 Vue JS 上的 parent 属性生成 id

Question

我正在尝试创建一个子组件，其中父组件传递一个道具，然后子组件根据传递的道具计算几个 id。到目前为止，我设法做到这一点的唯一方法是为每个 id 做一个计算属性。我确信必须有一种更简单的方法可以直接在模板中执行此操作。

例如父母：

 <Dates id="secondary_school" />

日期组件：

<template>
  <div :id="{{id}}_container">
    <div :id="{{id}}_timeline">
     <input :id="{{id}}_school_name" />
     ...
    </div>
  </div>
</template>

我知道我不能使用波浪括号，因为 Vue 会抱怨插值，但如果我不使用它们，那么它就找不到传递的道具。

是否有可能有类似的东西：

    <template>
      <div :id="id" + "_container">
        <div :id="id" + "_timeline">
         <input :id="id" + "_school_name" />
         ...
        </div>
      </div>
    </template>

标签： javascriptvuejs2

Answer 1

您可以使用以下方法实现此目的：

<div :id="id+'_container'">

<!-- Possible output: <div id="secondary_school_container"> -->

而不是这样写：

<div :id="{{id}}_container">