javascript - Vue.js:使用带有 v-for 循环和 v-if 的动态创建的 v-model 来显示/隐藏元素

Question

我正在使用 vue 来显示 Accordion (使用 Accordion 的基础 CSS 框架)。我使用 v-for 循环遍历数据，并构建 Accordion 。在 Accordion 内部，我将有四个单选按钮。如果用户单击特定的(例如，job 3)，我需要在单选按钮下方显示一个输入框。

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

我在概念化如何执行它时遇到了一些麻烦。

我想我可以在所有单选按钮上创建一个 v-model，我猜是动态创建它，然后在输入中使用 v-if 引用它。但是当我尝试这样做时，我的页面没有呈现。这是我在下面尝试的。

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

我什至尝试用单引号将 jobNumber 括起来，但没有成功。

我走在正确的轨道上吗？我怎样才能让它发挥作用？

Answer 1

这类问题通常可以通过为每个要迭代的对象添加一个属性来解决。

在这个例子中，我为每个作业对象添加了 selected 属性。

console.clear()

new Vue({
  el: "#app",
  data:{
    jobs:[
      {id: 1, selected: null},
      {id: 2, selected: null},
      {id: 3, selected: null},
    ]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.min.js"></script>
<div id="app">
  <dd class="accordion-navigation" v-for="(job, index) in jobs">
    <input type="radio" v-bind:name="'job-radio-' + job.id" value="job1" v-model="job.selected">
    <input type="radio" v-bind:name="'job-radio-' + job.id" value="job2" v-model="job.selected">
    <input type="radio" v-bind:name="'job-radio-' + job.id" value="job3" v-model="job.selected">

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

您可以看到，如果您在每次作业迭代中选择第三个单选按钮，输入就会出现。