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"
    }
]

See Image Representation在“选择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

更新＃2

要在Vue中显示数据，您可以在组件模板中的任何位置使用{{ your_variable_here }}语法。

这很简单，只需将打印语法放在html模板中所需的位置即可。

例如，要打印选择，您可以使用selectedHomeType指令检查v-if的值是否不同于0（因为0将是“ Select HomeType”的索引）。然后在此div中放入要在条件为true时显示的代码。
在其中，您可以使用selectedHomeType值从homeTypes数组中获取选定的元素。

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

修复了链式选择vue js组件

1 个答案:

更新

更新＃2