Vue.js：使用帶有v-for循環和v-if的動態創建的v-model顯示/隱藏元素

Question

我正在使用vue顯示手風琴（使用手風琴的基礎CSS框架）。 我使用v-for遍歷數據並構建手風琴。 在手風琴內部，我將有四個單選按鈕。 如果用戶單擊特定的一個（例如， 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模型，我猜想可以動態創建它，然后在輸入中使用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> 

您可以看到是否在每次作業迭代中選擇了第三個單選按鈕，輸入將出現。