Question

我正在尝试绑定一个属性和id我在一个按钮上改变它的样式，基本上我有一个课程数据库表（使用Laravel作为后端），其中每个课程都有一个名为completed的布尔，我只想做如果课程完成（true）以呈现特定的id，如果它不是（false）呈现另一个，那就是它，这是我的代码，

这是刀片模板，它位于表格中：

<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，我可以硬编码是活动是真的，当我按下按钮我得到我想要的类实际切换，如果不是这样我默认对于另一个类，现在问题是我需要在一个按钮上执行该操作，我按下的那个按钮，现在发生的是每个按钮切换它的类，我知道再一次它是由于我的代码没有明确这一点，事情就是我不知道怎么回事，所以如果你有任何想法请帮忙，几周和几周一直坚持这一点，我真的很沮丧，我不能让这一件事变得简单

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

在vue js中动态样式绑定以切换类

1 个答案: