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会抱怨插值，但如果我不使用它们，那么它就不会发现道具被传递。

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

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

在Vue JS上基于父道具生成id

1 个答案: