时间戳

首页 > 解决方案 > Laravel，根据类别选择更改表单字段

laravel - Laravel，根据类别选择更改表单字段

问题描述

我的数据库中有 2 个类别，名为“房屋租赁”和“车辆租赁”

用户可以根据这两个类别发布免费广告。

我的清单模型包含以下内容：

 Schema::create('listings', function (Blueprint $table) {
         $table->id();
         $table->string('title');
         $table->text('body');
         $table->unsignedBigInteger('user_id');
         $table->unsignedBigInteger('area_id');
         $table->unsignedBigInteger('category_id');
         $table->boolean('live')->default(false);
         $table->softDeletes();
         $table->timestamps();
         $table->foreign('user_id')->references('id')->on('users')->onDelete('cascade');
         $table->foreign('area_id')->references('id')->on('areas')->onDelete('cascade');
         $table->foreign('category_id')->references('id')->on('categories')->onDelete('cascade');


        });

当用户访问添加列表表单时，假设他选择“房屋租赁”类别，我希望添加表单显示“大小”、“房间”、“建筑类型”、“is_furnished”、“is_parking”等字段。

同时，如果用户添加列表并选择“车辆租赁”，我希望添加表单显示“vehicle_model”、“year_of_registration”、“condition”等字段。

我该怎么做呢？

标签： laravelvue.jseloquent

解决方案

vue这是一个可以提供帮助的单个组件

<template>
  <div> 
     <form @submit.prevent="iEdit ? iUpdate(): createMethod()">
        <label> Select Rental </label>
        <select class="form-control" @change="rentalChanged($event)" v-model="rentalForm.rental_category"> 
           <option value="house rental"> House Rental </option>
           <option value="vehicle rental"> Vehicle Rental </option>
        </select>

        <select v-if="house_rental">
           <!-- show house rental options -->
        </select>

        <select v-if="vehicle_rental">
           <!-- show vencle rental options -->
        </select>

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


<script> 
    name: 'componentName',

    data(){

      return {
          rentalForm: new Form({
             rental_category: '',
             another_form_field:'',
          }),
          iEdit : false,
          vehicle_rental :false,
          house_rental: false,
      }

    },

    methods{
        rentalChanged(event){

            if(event.target.value == 'house rental'){
               this.house_rental = true;
               this.vehicle_rental = false;
            }

            if(event.target.value == 'vehicle rental'){
               this.house_rental = false;
               this.vehicle_rental = true;
            }
        },

        iUpdate(){
          //update method
        },

        createMethod(){
          //create method
        },

    },

    mounted(){
    }
</script>

我希望它能给我一个我没有测试过的线索。

推荐阅读