Laravel，根据类别选择更改表单字段答案

【问题标题】：Laravel, changing form fields based on category selectionLaravel，根据类别选择更改表单字段
【发布时间】：2020-09-03 07:38:11
【问题描述】：

我的数据库中有 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”等字段.

同时，如果用户添加列表并选择“车辆租赁”，我希望添加表单显示“车辆型号”、“注册年份”、“条件”等字段。

我该怎么做呢？

【问题讨论】：

你是用 jquery 还是 vuejs 做前端？
vuejs 用于前端
那么你应该在前端实现这个逻辑。您可以根据选择的类型显示或隐藏表单。
后端呢？我需要另一张桌子吗？
您可以使用 2 种形式创建 Bootstrap 选项卡项 - 一种用于创建房屋租赁，另一种用于创建车辆租赁

标签： laravel vue.js eloquent

【解决方案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>

我希望它提供了一个我没有测试过的线索。

【讨论】：