[Vuejs]-Fix for chained select vue js component

by

0👍

✅

I think you mistakenly connected the wrong ajax method to the change event on the house type select box.
I think your logic is to update durations when you change the house type, but you are currently refreshing the house types available:

      <select name="Housetype" class='form-control centre' v-model='selectedHomeType' @change='getDuration()'>
        <option value='0' >Select HomeType </option>
        <option v-for='HomeType in HomeTypes' :value='HomeType.id' v-bind:key="HomeType.id">
          {{ HomeType.House_Type }}
        </option>
      </select>

Update

Make sure your variable names are correct throught the code.
For example, you first define durations variable, but then try to assign this.Durations (notice the capital letter).

This might not be the issue, but may be confusing for other programmers.
I would suggest to use snake_case or camelCase to name your variables and stick to that convention you have chosen in your code. Usually, PascalCase is used for class names.

To quickly read more about different types of casing, check out this medium post

Update #2

To display data in Vue you can use {{ your_variable_here }} syntax anywhere in your component template.

That’s really simple, just put the printing syntax where you need in the html template.

For example, to print the selection you can check if selectedHomeType‘s value is different than 0 (because 0 would be “Select HomeType”‘s index) with the v-if directive. Then inside this div put the code that you want to display when the given if condition is true.
In there you can use the selectedHomeType value to get the chosen element from the homeTypes array.

<div v-if="selectedHomeType !== 0">
    <p>The selected HomeType is: {{ this.homeTypes[selectedHomeType - 1].House_Type }}</p>
</div>

Leave a comment