Javascript Vue.js：使用动态创建的v-model，使用v-for循环和v-if来显示/隐藏元素 我使用VUE显示手风琴（使用手风琴的基础CSS框架）。我使用v-for循环浏览数据，并构建手风琴。在手风琴里面，我有四个单选按钮。如果用户单击一个特定的按钮（例如，job3），我需要在单选按钮下显示一个输入框 <dd class="accordion-navigation" v-for="(job, index) in jobs"> <input type="radio" v-bind:name="'job-radio-' + job.id" value="job1"> <input type="radio" v-bind:name="'job-radio-' + job.id" value="job2"> <input type="radio" v-bind:name="'job-radio-' + job.id" value="job3"> <!-- The input box below should only be displayed if job 3 is selected. --> <input type="text" v-bind:id="find-user-' + job.id"> </dd>

我甚至试着用单引号括住

jobNumber

，但运气不佳

---

我走对了吗？如何使其工作？

这类问题通常通过向迭代的每个对象添加属性来解决

在本例中，我向每个作业对象添加了

selected

属性

console.clear（）
新Vue({
el:“应用程序”，
数据：{
工作：[
{id:1，selected:null}，
{id:2，所选：null}，
{id:3，selected:null}，
]
}
})

模板必须是父标记我希望每个

job

对象都有某种

selectedJob

，这就是您的

v-model

所绑定的。这样：@Bert向我的对象添加另一个键值对正是我所需要的！肯定是想得太多了。你应该提交你的评论作为答复，这样我才能接受。

<dd class="accordion-navigation" v-for="(job, index) in jobs">
  <input type="radio" v-bind:name="'job-radio-' + job.id" value="job1" v-model="jobNumber + job.id">
  <input type="radio" v-bind:name="'job-radio-' + job.id" value="job2" v-model="jobNumber + job.id">
  <input type="radio" v-bind:name="'job-radio-' + job.id" value="job3" v-model="jobNumber + job.id">

  <!-- The input box below should only be displayed if job 3 is selected. -->
  <template v-if="jobNumber + job.id == 'job3'">
    <input type="text" v-bind:id="find-user-' + job.id">
  </template>
</dd>