javascript - 在 Vue JS 上根据父属性生成 id

Question

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

例如父级:

 <Dates id="secondary_school" />

日期组件:

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

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

是否可以有类似的东西:

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

Answer 1

你可以使用这样的方法来实现:

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

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

不要这样写:

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