Laravel，基于类别选择更改表单域

Question

我的数据库里有两个类别，分别是“房屋租赁”和“汽车租赁”。

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

我的列表模型包含以下内容：

 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');


        });

当用户访问add listing form时，假设他选择了“房屋租赁”类别，我希望add表单显示诸如“size”、“room”、“building_type”、“is_furnished”、“is_parking”等字段。

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

我该怎么做呢？

Answer 1

这是一个可以提供帮助的单一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>

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