how can i show a selected grade on a page?

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

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>

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.

Now you can add your GradeComponent.vue in 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>

Now finally you can add it in app.js

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

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

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

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top