Vue JS中的動態樣式綁定可切換類

Question

我正在嘗試將屬性綁定到我在按鈕上具有的id來更改其樣式，基本上我有一個課程數據庫表（使用Laravel作為后端），其中每個課程都有一個名為completed的布爾值，我要做的就是課程完成（true）呈現特定的id，如果不是（false）呈現另一個id，就這樣，這是我的代碼，

這是刀片模板，在表內：

<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>

這是vue實例，我在這里要做的就是添加一個if條件，該條件將cssClass正確設置為我想要的id的名稱：

    <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>

現在，視圖實例中的上述代碼錯誤顯示為“ Uncaught SyntaxError：Unexpected token”。 指向if語句course.completed，除非我刪除整個if語句，否則它不會消失，我知道我不會從任何地方獲取該路線，只是不知道如何，如果有更好的方法想法/方法，請告訴我，謝謝您的寶貴時間。

更新 ：這是一個更改，這是我到目前為止所做的，至於視圖：

  @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

現在，關於vue實例：

<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>

因為我知道刀片@if條件傳遞為true，所以我可以硬編碼active是否為true，當我按下按鈕時，我得到了我想要的類實際切換的內容，如果不是，我默認為另一個類，現在的問題是我需要在一個按鈕上執行一個動作，我按下了那個按鈕，現在發生的事情是每個按鈕都切換了它的類，我知道這又一次是由於我的代碼不明確這件事是我還不知道如何，所以如果您有任何想法，請堅持幾個星期甚至幾個星期，請幫忙，我無法讓這一簡單的事情奏效真讓人沮喪。

Answer 1

將表達式作為屬性鍵是沒有意義的。

嘗試這個：

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!'
          }
        }
      }
  });