时间戳

首页 > 解决方案 > 修复链式选择 vue js 组件

laravel - 修复链式选择 vue js 组件

问题描述

我有 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 Bedroom Durations for 1 Bedroom show display”的图像表示，例如“持续时间选择框”中的 3 个月、6 个月和 9 个月

标签： laravelvue.jsaxiosvue-component

解决方案

我认为您错误地将错误的 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用于类名。

要快速阅读有关不同类型套管的更多信息，请查看此中型帖子

更新#2

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

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

例如，要打印选择，您可以selectedHomeType使用指令检查 的值是否不同于 0（因为 0 将是“选择 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>

推荐阅读