title: Problem in structuring a proper way to iterate data into html elements in vue
body: <p>What I am trying to do is <strong>:</strong></p>
  <p>Searching for a patient, results in a drop-down list if I choose a user, his gender and phone numbers will be automatically set in their respected fields.</p>
  <p>Searching for a user via phone number does the same thing.</p>
  <p>HTML Code <strong>:</strong></p>
  <pre><code>  &lt;div class=&quot;patient-info&quot;&gt;
              &lt;h4&gt;Create Appointment&lt;/h4&gt;
              &lt;div class=&quot;create-app-patient-rating-and-gender&quot;&gt;
                &lt;div class=&quot;create-app-patient-rating&quot;&gt;
                  &lt;p&gt;Rating:&lt;/p&gt;
                  &lt;v-rating
                    v-model=&quot;rating&quot;
                    background-color=&quot;white&quot;
                    color=&quot;yellow accent-4&quot;
                    dense
                    half-increments
                    hover
                    readonly
                    size=&quot;18&quot;
                  &gt;&lt;/v-rating&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div  class=&quot;patient-create-data-container&quot; 
             &gt; 
              &lt;!--        v-for=&quot;item in gotpatientNames&quot; :key=&quot;item.id&quot;            --&gt;
                &lt;v-autocomplete
               @input.native=&quot;(event) =&gt; fetchPatientnames(event)&quot;
                  class=&quot;patient-patient&quot;
                  v-model=&quot;patientname&quot;
                  :items=&quot;item.patientna&quot;
                  hide-no-data
                  dense
                  filled
                  append-icon=&quot;&quot;
                  label=&quot;Patient Name&quot;
                &gt;&lt;/v-autocomplete&gt;
  
                &lt;v-text-field
                  v-model=&quot;gender&quot;
                  show-current
                  type=&quot;text&quot;
                  label=&quot;Gender&quot;
                &gt;&lt;/v-text-field&gt;
              &lt;/div&gt;
  
              &lt;div class=&quot;patient-phones&quot;&gt;
                &lt;v-autocomplete
                  class=&quot;patient-main-phone&quot;
                  v-model=&quot;phonenumber&quot;
                  :items=&quot;gotpatientNames&quot;
                  dense
                  filled
                  append-icon=&quot;&quot;
                  hide-spin-buttons
                  type=&quot;number&quot;
                  label=&quot;Phone&quot;
                &gt;&lt;/v-autocomplete&gt;
  
                &lt;v-autocomplete
                  v-model=&quot;alternativephonenumber&quot;
                  :items=&quot;numbers&quot;
                  dense
                  filled
                  hide-spin-buttons
                  type=&quot;number&quot;
                  append-icon=&quot;&quot;
                  label=&quot;Alternative Phone&quot;
                &gt;&lt;/v-autocomplete&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  </code></pre>
  <p>My array looks like this <strong>:</strong></p>
  <pre><code>&quot;patientnames&quot;: [
          {
              &quot;userid&quot;: 1,
              &quot;id&quot;: 1,
              &quot;patientname&quot;: &quot;Eadie&quot;,
              &quot;phone&quot;: &quot;8759800300&quot;,
              &quot;alternativephone&quot;: &quot;1092851519&quot;,
              &quot;gender&quot;: &quot;Female&quot;
          },
          {
              &quot;userid&quot;: 2,
              &quot;id&quot;: 2,
              &quot;patientname&quot;: &quot;Banana&quot;,
              &quot;phone&quot;: &quot;8759800300&quot;,
              &quot;alternativephone&quot;: &quot;1092851519&quot;,
              &quot;gender&quot;: &quot;Female&quot;
          },
          {
              &quot;userid&quot;: 6,
              &quot;id&quot;: 6,
              &quot;patientname&quot;: &quot;Alvera&quot;,
              &quot;phone&quot;: &quot;5352622059&quot;,
              &quot;alternativephone&quot;: &quot;5927226106&quot;,
              &quot;gender&quot;: &quot;Male&quot;
          },
          {
              &quot;userid&quot;: 7,
              &quot;id&quot;: 7,
              &quot;patientname&quot;: &quot;Gavin&quot;,
              &quot;phone&quot;: &quot;1375015030&quot;,
              &quot;alternativephone&quot;: &quot;8917525333&quot;,
              &quot;gender&quot;: &quot;Male&quot;
          },
          {
              &quot;userid&quot;: 9,
              &quot;id&quot;: 9,
              &quot;patientname&quot;: &quot;Haleigh&quot;,
              &quot;phone&quot;: &quot;4724336149&quot;,
              &quot;alternativephone&quot;: &quot;1954541209&quot;,
              &quot;gender&quot;: &quot;Male&quot;
          },
          {
              &quot;userid&quot;: 10,
              &quot;id&quot;: 10,
              &quot;patientname&quot;: &quot;Eadmund&quot;,
              &quot;phone&quot;: &quot;5826216088&quot;,
              &quot;alternativephone&quot;: &quot;5209747561&quot;,
              &quot;gender&quot;: &quot;Female&quot;
          }
      ]
  }
  </code></pre>
  <p>How my UI looks :</p>
  <p><a href="https://i.stack.imgur.com/3U4BV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3U4BV.png" alt="enter image description here" /></a></p>
  <p>I am not sure how to tackle this with Vue. I thought of <code>v-for</code> but it will also duplicate html elements and I don't want that.</p>
  <p>Can someone help me on this ?</p>