这个及时改变订阅按钮颜色的写法有点问题

还有回复的编辑按钮,如果编辑后取消保存会显示编辑后的内容,,要刷新页面才能消失..

我发现这个帖子编辑后 只有保存按钮,,是个解决办法 :confused:

提交回复后刷新了页面？刷新了页面就需要判断一次有没有订阅 报错的话语法没用对

Vue 的组件是单向数据流，改变 props 需要通过 $emit 或者 vuex forum\resources\assets\js\components\SubscribeButton.vue

<template>
  <button :class="classes" @click="subscribe">Subscribe</button>
</template>

<script>
export default {
  props: ['active'],

  computed: {
    classes() {
      return ['btn',this.active ? 'btn-primary' : 'btn-default'];
    }
  },

  methods: {
    subscribe() {
      axios[this.active ? 'delete' : 'post'](
        location.pathname + '/subscriptions'
      )
      this.$emit('change-active')
    }
  }
}
</script>

forum\resources\views\threads\show.blade.php

<subscribe-button :active="{{ json_encode($thread->isSubscribedTo)}} || active" @change-active="active = !active"></subscribe-button>
...
data:() => ({
...
active: false
...
})
...

这样会更好一点 不用修改 forum\resources\views\threads\show.blade.php forum\resources\assets\js\components\SubscribeButton.vue

<template>
  <button :class="classes" @click="subscribe">Subscribe</button>
</template>

<script>
export default {
  props: ['active'],

  computed: {
    classes() {
      return [this.isActive ? 'bg-indigo-500' : 'bg-red-500']
    }
  },
  data: () => ({
    isActive: false
  }),
  mounted() {
    this.isActive = this.active
  },
  methods: {
    subscribe() {
      axios[this.active ? 'delete' : 'post'](
        location.pathname + '/subscriptions'
      )
      this.isActive = !this.isActive
    }
  }
}
</script>

括号和冒号只是写法不通

export default {
  // 普通写法
  data: function () {
    return {}
  }
  // es6 简写
  data() {
    return {}
  }
  //  箭头函数
  data:() => {
    return {}
  }
  /**
   * 单行箭头函数
   * 
   * () => 1
   * 相当于
   * () => {
   *    return 1
   * }
   */
  data: () => ({})
}

这些写法都是等效的，个人更喜欢最后一种。