title: Vuejs : Making dependent dropdown with axios
body: <p>I had a problem showing the dependent dropdown. It fetches the hospital, but for the specialty, it gives me an empty array with no error like this image:</p>
  <p><a href="https://i.stack.imgur.com/Y40Cx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Y40Cx.png" alt="enter image description here" /></a></p>
  <p>I couldn't find where is my mistake it didn't show anything like this image:</p>
  <p><a href="https://i.stack.imgur.com/mQTHp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mQTHp.png" alt="enter image description here" /></a></p>
  <p>This is my route:</p>
  <pre><code>// Hospital
  Route::get('hospital', 'ApiController@getHospital');
  // Speciality
  Route::get('speciality', 'ApiController@getSpeciality');
  </code></pre>
  <p>My controller:</p>
  <pre><code>// Speciality
  public function getSpeciality(Request $request)
  {
      $hosId = $request-&gt;input('hospital_id');
      
      $data = DB::table('tr_hospital_specialists as tr')
          -&gt;select('tr.id','hospital_id','specialist_id','specialist_name')
          -&gt;join('mst_specialists as sp', 'tr.specialist_id', '=', 'sp.id')
          -&gt;join('mst_hospitals as hos', 'tr.hospital_id', '=', 'hos.id')
          -&gt;where('hospital_id', $hosId)
          -&gt;orderBy('specialist_name','asc')
          -&gt;get();
  
      if ($data) {
          return response()-&gt;json([
              'success' =&gt; true,
              'message' =&gt;'success',
              'data'    =&gt; $data
          ], 200);
      } else {
          return response()-&gt;json([
              'success' =&gt; false,
              'message' =&gt; 'Data not found.',
          ], 400);
      }
  }
  </code></pre>
  <p>My view:</p>
  <pre><code>&lt;div class=&quot;form-row&quot;&gt;
      &lt;div class=&quot;form-group col-md-6&quot;&gt;
          &lt;label class=&quot;text-white&quot;&gt;Hospital&lt;/label&gt;
          &lt;model-list-select :list=&quot;hospital&quot;
              v-model=&quot;optHospital&quot;
              @change=&quot;getSpeciality&quot;
              option-value=&quot;id&quot;
              option-text=&quot;hospital_name&quot;
              placeholder=&quot;Choose Hospital&quot;&gt;
          &lt;/model-list-select&gt;
      &lt;/div&gt;
      &lt;div class=&quot;form-group col-md-6&quot;&gt;
          &lt;label class=&quot;text-white&quot;&gt;Speciality&lt;/label&gt;
          &lt;model-list-select :list=&quot;speciality&quot;
              v-model=&quot;optSpeciality&quot;
              option-value=&quot;specialist_id&quot;
              option-text=&quot;specialist_name&quot;
              placeholder=&quot;Choose Speciality&quot;&gt;
          &lt;/model-list-select&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>And this is my script:</p>
  <p><a href="https://i.stack.imgur.com/w4dtf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/w4dtf.png" alt="enter image description here" /></a></p>
  <p>Thanks.</p>