Dynamic style binding in vue js to toggle a class

Question

I am trying to bind an attribute to and id I have on a button to change its styling, basically I have a courses database table(using Laravel as backend) where each course has a Boolean named completed, All I want to do is if the course is completed(true) to render a specific id, and if it is not(false) to render another one, that's it, here's my code,

This is the blade template, this is inside a table:

<td>
<form method="POST" action="{{ route('course.completed', $course->name) }}" id="form-submit">
    {{ csrf_field() }}
  @if ($course->completed)
    <button @click.prevent="onSubmit({{ $course }})" type="button" class="btn btn-sm" :id="cssClass">@{{ text }}</button>
      @endif
  </form>

And here is the vue instance, All i want to do here is to add an if condition that will set the cssClass properly to the name of the id that I want:

    <script>
     new Vue({
          el: '#app',
          data: {
            cssClass: '',
            text: ''
          },
          methods: {
            onSubmit: function(course) {
              axios.post('/MyCourses/' + course.name)
                  //  .then(function (response){
                  //  });
            }
          },
//Basically here's what I would like to be able to do
         if (course.completed == true) {     
            this.cssClass = 'coursetogglingtrue',
            this.text = 'Done!'
          } else {
            this.cssClass = 'coursetogglingfalse',
            this.text = 'Not Yet!'
          }
      });
    </script>

Right now the above code in the view instance errors out with "Uncaught SyntaxError: Unexpected token ." directed at the if statement course.completed, and it doesn't go away unless I delete the whole if statement, I know I'm not fetching the course from anywhere, I just don't know how yet, if there is a better idea/approach please let me know, and thanks for your time.

UPDATE : Here's a change, this is what I have done so far, As for the view:

  @if ($course->pivot->completed == true)
   <button @click.prevent="onSubmit({{ $course }})" type="button" class="btn btn-sm" :id="[isActive ? greenClass.aClass : redClass.aClass]">@{{ greenClass.text }}</button>
   {{-- @else
   <button @click.prevent="onSubmit({{ $course }})" type="button" class="btn btn-sm" :id="[isActive ? greenClass.aClass : redClass.aClass]"></button> --}}
  @endif

Now as for the vue instance:

<script>
 new Vue({
      el: '#app',
      data: {
        isActive: true,
        greenClass: {aClass: 'coursetogglingtrue', text: 'Done!'},
        redClass: {aClass: 'coursetogglingfalse', text: 'Not Yet!'}

      },
      methods: {
        onSubmit: function(course) {
            axios.post('/MyCourses/' + course.name)
                //  .then(function (response){
                //  });
          this.isActive = !this.isActive;
        }
      }
  });
</script>

Since that I know the blade @if condition is passing as true, I can hardcode the is active is true, and when I press on the button I get what I wanted the class actually toggles, if that is not true I default to the other class, now the problem is I need that action to be performed on exactly one button, the one I pressed on, right now what happens is every single button toggles its class, I know that once again it's due to my code not being explicit about this, the thing is I don't know how yet, so please help if you have any idea, have been stuck on this for weeks and weeks, it's really frustrating that I can't get this one simple thing to work.

Answer 1

It doesn't make sense to put an expression as a property key.

Try this:

new Vue({
      el: '#app',
      data: {
        cssClass: '',
        text: ''
      },
      methods: {
        onSubmit: function(course) {
          axios.post('/MyCourses/' + course.name)
              //  .then(function (response){
              //  });
          if (course.completed == true) {     
            this.cssClass = 'coursetogglingtrue',
            this.text = 'Done!'
          } else {
            this.cssClass = 'coursetogglingfalse',
            this.text = 'Not Yet!'
          }
        }
      }
  });