Vue.js：v-forループとv-ifを使用して動的に作成されたvモデルを使用して要素を表示/非表示にする

Question

vueを使用してアコーディオンを表示しています（アコーディオンの基礎CSSフレームワークを使用）。私はv-forを使ってデータをループし、アコーディオンを構築します。アコーディオンの中には、4つのラジオボタンがあります。ユーザーが特定のもの（たとえば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>

あなたは、各ジョブの繰り返しで第三のラジオボタンを選択した場合、入力が表示されます見ることができます。