Генерация идентификаторов на основе родительского реквизита на Vue JS

Question

Я пытаюсь создать дочерний компонент, в котором родитель передает реквизит, а затем ребенок вычисляет несколько идентификаторов на основе пропущенного реквизита.Пока что единственный способ, которым мне удалось это сделать - это вычислить свойство для каждого из идентификаторов.Я уверен, что должен быть более простой способ сделать это непосредственно в шаблоне.

Например, родитель:

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

Answer 1

Вы можете достичь этого, используя что-то вроде этого:

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

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

Вместо того, чтобы писать это так:

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