How to toggle a class based on a variable passed from Laravel using a Vuejs component

Question

This is the 3rd attempt for me to get some help on this issue, for so long I've been trying to toggle an id using Vuejs, I just want that id to change based on a boolean value passed on from Laravel, I managed to do it without components but I ran into a problem, there's multiple buttons on the page, when one gets their id updated the others do as well, so I thought maybe a component could solve this, I just can't get it to work.

Here's the blade template, this is inside a table inside a foreach loop that has access to a $courses variable:

courses.blade:

<form method="POST" action="{{ route('course.completed', $course->name) }}" id="form-submit">
                       {{ csrf_field() }}
    @if ($course->pivot->completed == true)
    <course-buttons id="this.greenClass.aClass">Done</course-buttons>
    @else
    <course-buttons id="this.redClass.aClass">Not Yet</course-buttons>
    @endif
</form>

this is app.js:

require('./bootstrap');
Vue.component('course-buttons', require('./components/course-buttons.vue'))

var vm = new Vue({
el: '#app'
});

And this is the course-buttons.vue file:

<template>

  <button @click.prevent="onSubmit({{ $course }})" type="button" class="btn btn-sm" :id=id><slot></slot></button>

</template>

<script>
  export default {
    props: ['id'],
    data: function() {
      return {
        greenClass: {aClass: 'coursetrue', text: 'Done!'},
        redClass: {aClass: 'coursefalse', text: 'Not Yet!'}
      };
    },
    methods: {
      onSubmit: function(course) {
        axios.post('/MyCourses/' + course.name)
           .then(function (response){
             console.log(response.data.course.pivot.completed)

             if (response.data.course.pivot.completed == true){
               return [
                 vm.redClass.aClass = 'coursetrue',
                 vm.redClass.text = 'Done!',
                 vm.greenClass.aClass = 'coursetrue',
                 vm.greenClass.text = 'Done!'
               ]
             } else {
               return [
                 vm.greenClass.aClass = 'coursefalse',
                 vm.greenClass.text = 'Not Yet',
                 vm.redClass.aClass = 'coursefalse',
                 vm.redClass.text = 'Not Yet'
               ]
             }
           });
     }
    }
  }
</script>

First I know that my code isn't good, that's why I asked for help many times but with no answers at all, so if you have any tips that might help me get this code cleaner, even change it totally but just get the job done, I'm all ears.

The errors I'm getting right now is first the @click.prevent is an invalid expression, tried moving that to the tag, it doesn't do anything over there so I had that going before and now I lost it as well, also I get an error that the id is not defined on the instance, although I defined the props and data in the vue component. if you're wondering why do I even assign the id on the tag itself and not the component, it's because of how my code is structured,e.g "If the value is true then load the tag with that id, otherwise load it with that id", once again if you can help me do this in a completely different way I'll be grateful.

tony19 · Accepted Answer · 2022-07-16 01:58:21Z

1

One error I see is you have to use v-bind:id here, as you are assigning a vue variable:

<course-buttons v-bind:id="this.greenClass.aClass">Done</course-buttons>

One more is in onSubmit method, you dont have to return anything, and also you are using vm there, instead of that you can just do following:

  onSubmit: function(course) {
    axios.post('/MyCourses/' + course.name)
       .then((response) => {
         console.log(response.data.course.pivot.completed)
         if (response.data.course.pivot.completed == true){
             this.redClass.aClass = 'coursetrue',
             this.redClass.text = 'Done!',
             this.greenClass.aClass = 'coursetrue',
             this.greenClass.text = 'Done!'
         } else {
             this.greenClass.aClass = 'coursefalse',
             this.greenClass.text = 'Not Yet',
             this.redClass.aClass = 'coursefalse',
             this.redClass.text = 'Not Yet'
         }
       });
 }

Here I have also used arrow syntax, here is why.

edited Jul 16, 2022 at 1:58

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Mar 13, 2017 at 18:07

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Omar Tarek Over a year ago

Thank you for the quick help, although I need some more, right now I did what you recommended and I'm getting "[Vue warn]: Error when rendering root instance" and "Uncaught TypeError: Cannot read property 'aClass' of undefined", do you think there's something wrong with how I declared the data on the component?

Omar Tarek Over a year ago

Also there is that issue of "[Vue warn]: failed to compile template: <button @click.prevent="onSubmit({{ $course }})" type="button" class="btn btn-sm" :id=id><slot></slot></button> - invalid expression: @click.prevent="onSubmit({{ $course }})" Which I have no idea how to correct.

Saurabh Over a year ago

@OmarTarek I noticed now, you are passing v-bind:id="this.greenClass.aClass", but this.greenClass is already data of your component, so either you move this data and loading of data to parent. see here how props works.

Collectives™ on Stack Overflow

How to toggle a class based on a variable passed from Laravel using a Vuejs component

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related