Исправлена ​​ошибка при выборе компонента vue js

Question

У меня есть 2 выпадающих списка, один для типов дома и другой для продолжительности, я смог получить данные в раскрывающемся списке типа дома, но раскрывающийся список продолжительности не получает данные.

Любой, пожалуйста, помогите решить

Это vue компонент

<script>
   export default {
       mounted() {
           console.log('Component mounted.')
       },
       data(){
           return {
              selectedHomeType: 0,
              HomeTypes: [],
              selectedDuration: 0,
              durations: []
           }
       },
       methods:{
           getHousetypes: function(){
             axios.get('api/getHousetypes')
             .then(function (response) {
                this.HomeTypes = response.data;
             }.bind(this));
             },
           getDuration: function() {
               axios.get('api/getDuration',{
                params: {
                  house_type_id: this.selectedHomeType
                }
             }).then(function(response){
                   this.Durations = response.data;
               }.bind(this));
           }
       },
       created: function(){
           this.getHousetypes()
       }
   }
</script>

    <template>
    <div>
    
     <div class=" col-xs-4 text-center">
        
                            
      <label>Select HomeType:</label><div class="col-xs-4 text-center">
      <select name="Housetype" class='form-control centre' v-model='selectedHomeType' @change='getHousetypes()'>
        <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>
                            </div>
    </div>                        
    <div class="form-group col-xs-4 text-center">
  
    

      <div class="form-group">
      <label>Select Durations:</label>
      <select class='form-control' v-model='selectedDuration'>
        <option value='0' >Select Durations</option>
        <option v-for='duration in durations' :value='duration.id' v-bind:key="duration.id">
          {{ duration.duration }}
        </option>
      </select>
      </div>




      </div>
      </div>
  </template>
  
  

Sample JSON Data

Data for Hometypes

{
    "success": [
        {
            "id": 1,
            "created_at": "2019-09-26 08:44:00",
            "updated_at": "2019-09-26 08:43:58",
            "House_Type": "1 Bedroom",
            "status": "1"
        },
        {
            "id": 2,
            "created_at": "2019-09-26 08:44:00",
            "updated_at": "2019-09-26 08:43:58",
            "House_Type": "2 Bedroom",
            "status": "1"
        },
        {
            "id": 3,
            "created_at": "2019-09-26 08:44:00",
            "updated_at": "2019-09-26 08:43:58",
            "House_Type": "3 Bedroom",
            "status": "1"
        },
        {
            "id": 4,
            "created_at": "2019-09-26 08:44:00",
            "updated_at": "2019-09-26 08:43:58",
            "House_Type": "3 Bedroom Penthouse",
            "status": "1"
        },
        {
            "id": 5,
            "created_at": "2019-09-26 08:44:00",
            "updated_at": "2019-09-26 08:43:58",
            "House_Type": "4 Bedroom",
            "status": "1"
        }
    ]
}

Data for Durations

[
    {
        "id": 13,
        "created_at": "2019-09-26 08:46:15",
        "updated_at": "2019-09-26 08:46:17",
        "house_type_id": 5,
        "duration": "9 Months",
        "status": "1"
    },
    {
        "id": 14,
        "created_at": "2019-09-26 08:46:15",
        "updated_at": "2019-09-26 08:46:17",
        "house_type_id": 5,
        "duration": "6 Months",
        "status": "1"
    },
    {
        "id": 15,
        "created_at": "2019-09-26 08:46:15",
        "updated_at": "2019-09-26 08:46:17",
        "house_type_id": 5,
        "duration": "3 Months",
        "status": "1"
    }
]

См. Представление изображения При выборе HomeType Длительность 1 спальни для показа 1 спальни, например, 3 месяца, 6 месяцев и 9 месяцев в поле выбора длительностей

Answer 1

Я думаю, что вы ошибочно связали неправильный метод ajax с событием изменения в поле выбора типа дома.
Я думаю, что ваша логика - обновить продолжительность при изменении типа дома, но вы в настоящее время обновляете доступные типы домов.:

      <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>

Обновление

Убедитесь, что имена переменных корректны в коде.
Например, сначала вы определяете переменную durations, но затем пытаетесь присвоить this.Durations(обратите внимание на заглавную букву).

Это может не быть проблемой, но может сбивать с толку других программистов.
Я бы предложил использовать snake_case или camelCase для именования ваших переменных и придерживатьсяэто соглашение вы выбрали в своем коде.Обычно, PascalCase используется для имен классов.

Чтобы быстро узнать больше о различных типах корпусов, ознакомьтесь с medium post

Update # 2

Для отображения данных в Vue вы можете использовать синтаксис {{ your_variable_here }} в любом месте шаблона компонента.

Это действительно просто, просто поместите синтаксис печати там, где вам нужно, в шаблон HTML.

Например, чтобы распечатать выборку, вы можете проверить, отличается ли значение selectedHomeType от 0 (потому что 0 будет индексом «Select HomeType») с директивой v-if.Затем внутри этого div поместите код, который вы хотите отобразить, когда данное условие if будет истинным.
Там вы можете использовать значение selectedHomeType, чтобы получить выбранный элемент из массива homeTypes.

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