如何显示所选成绩及其主题? [英] How to Display a selected grade with its subject?

问题描述

我希望当用户从列表中选择一个下拉菜单时，必须显示该年级可用的一组科目，并在其旁边的复选框旁边

I want to when a user select a dropdown from the list, a group of subjects available for that grade must be displayed with checkboxes next to them

我的控制器

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>

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

THIS IS IMPOSSIBLE... I GIVE UP

推荐答案

据我了解，您想从下拉菜单&中选择成绩.根据年级的学科显示其对应的复选框.

As per I have understood, you want to select grades from dropdown & show its corresponding checkbox as per subjects for the grades.

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

I would suggest to create a vue component for that lets say grades-component, in your blade you can add,

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

在刀锋中，$ grades是您通过压缩传递的对象(或数组).基本上是将您的数据传递到组件，我们将在道具的帮助下使用它.

here in blade, $grades is the object(or array) you are passing via compact. Basically it is to pass your data to the component, we will use that with help of props.

现在，您可以在 resources-> 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中了

Now finally you can add it in app.js

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

然后编译您的vuejs代码，我将使用 npm run watch

Then compile your vuejs code, I would use npm run watch

类似但带有伪造的数据，您可以看到 https://jsfiddle.net/bhucho/2yu4nmws/3/，

A similar one but with fake data, you can see https://jsfiddle.net/bhucho/2yu4nmws/3/,

这篇关于如何显示所选成绩及其主题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！