laravel - 如何显示所选成绩及其主题？

问题描述

我想当用户从列表中选择一个下拉列表时，必须显示一组可用于该年级的科目，旁边有复选框

我的控制器

public function create()
    {
       
        $grades = Grade::with('subjects')->orderBy('slug', 'asc')->get();
        
        return view('admin.users.create', compact( 'grades'));
    }

刀片文件

<div class="form-group">
         <select id="grade" name="grade" class="form-control @error('grade') is-invalid @enderror" v-model="selectedSubjects">
                 <option value="">Choose a Grade...</option>
                            @foreach($grades as $grade)
                  <option value="{{ $grade->id }}" {{ old('grade', $grade) == $grade->name ? 'selected' : "" }}>{{ $grade->name }}</option>                                            
                              @endforeach
               </select>
</div>


<div class="custom-control custom-checkbox mt-2">
        @foreach($grade->subjects as $subject)
                 <input type="checkbox" class="custom-control-input" id="{{$subject->slug}}" name="subjects[]" :value="selectedSubjects" /> 
                   <label class="custom-control-label" for="{{$subject->slug}}">{{$subject->name}}</label>
           @endforeach
  </div>

Vue

<script>
    window.addEventListener('load',function(){
        var app = new Vue({
            el: '#app',
            data:{
                selectedSubjects: {!! $grade->subjects->pluck('name') !!},
            }
        });
    });
</script>

这是不可能的……我放弃了

标签： laravelvue.js

据我了解，您想从下拉列表中选择成绩并根据成绩的科目显示其相应的复选框。

我建议为此创建一个 vue 组件，可以grades-component在刀片中添加，

<form action="" class="form-control">
       @csrf
       <grade-component :grades='@json($grades)'></grade-component>
</form>

在刀片中，$grades 是您通过紧凑传递的对象（或数组）。基本上是将您的数据传递给组件，我们将在道具的帮助下使用它。

现在你可以添加你的 GradeComponent.vueresources->js->components->GradeComponent.vue

GradeComponent.vue

<template>
<div class="container">

  <select v-model="selected_grade" @change="onChange($event)">
  <option v-for="grade in grading" :value="grade.slug">{{grade.name}}</option>
  </select>
    <div class="custom-control custom-checkbox mt-2" v-if="subjects !== null" v-for="subject in subjects">
          <input type="checkbox" :id="subject.slug" :value="subject.slug"/> 
          <label :for="subject.slug">{{subject.name}}</label>
        
    </div>
</div>

</template>
<script>

export default{
      props: ['grades'],
 data: function() {
    return {
      grading: this.grades,
      selected_grade: null,
      subjects : null
    }
  },
  methods: {
        onChange(event) {
          this.grading.forEach((obj, index) => {
            if (obj.slug === event.target.value){
                this.subjects = obj.subjects;
            }
          })
        }
    }
}
</script>

现在终于可以在 app.js 中添加它了

Vue.component('grade-component', require('./components/GradeComponent.vue').default);

然后编译你的 vuejs 代码，我会用npm run watch

类似但有假数据，你可以看到https://jsfiddle.net/bhucho/2yu4nmws/3/，

laravel - 如何显示所选成绩及其主题？

问题描述

解决方案

推荐阅读