VueJs + Laravel-类似于按钮组件

Question

我试图很好地了解VueJS，并且将其与Laravel 5.7一起用于个人项目，但是我无法确切地知道如何完成一个“ like”按钮\\ icon的简单任务。

因此，在这种情况下，我有一个页面，显示数据库中的各种帖子，在每个帖子的底部，我都希望有一个“ like toogle”按钮，该按钮由一个图标制成，后跟该帖子的被赞次数。 首先，该按钮将包含从相应的数据库表中检索到的数据，但是如果单击它，将显示的数字增加一个，并在数据库中插入一个新的数字。

我将“喜欢”图标作为组件：

<section class="bottomInfo">
 <p>
 <likes now="{{ $article->likes }}"></likes> 
 <span class="spacer"></span>
 <span class="entypo-chat"> 
  {{ $article->comments }}
 </p>
</section> <!-- end .bottomInfo -->

如您所见，有一个<likes> now我在其中添加了一个prop，这是我到目前为止对组件的了解，通过这种方式，我可以将db中的数据作为起始值（ now包含db行值） ），问题是，我不知道在哪里/如何在我的应用程序中保留该值，我还将在其中使用axios来增加喜欢的人数。

这是组件：

<template>    
    <span class="entypo-heart"> {{ now }}</span>    
</template>

<script>
    export default {
        props: ['now'],
        data() {
            return {
                like: this.now
            }
        },
        mounted() {
            console.log('Component mounted.');
        }    
    }
</script>

我试图做的事情（并且我不知道它是否正确）是将now的值传递给名为like的属性内的data函数，因此，如果我理解正确， like这样的变量现在是我的属性的一部分。我的主要Vue实例就是这个

const app = new Vue({
    el: '#main',
    mounted () {
        console.log("The value of 'like' property is " + this.like)

    },
    methods: {
        toggleLike: function() {

        } //end toggleLike
    }
});

mounted函数应该打印该属性值，但是我却得到了

The value of 'like' property is undefined

为什么？ 这是怎么运作的？ 我该如何做到这一点，以便获得该值并在单击时对其进行更新，然后向我的API发出请求？ （我的意思是，我不是在问如何执行这些单个任务，而只是在这种情况下在何处\\如何实施它）。 我的组件逻辑正确吗？

Answer 1

也许更多的冗长就不会造成伤害：

props: {
  now: {
    type: Number,
    required: true
  }
}

代替使用data功能，而使用computed属性：

computed: {
  likes: {
    get: function() {
      return this.now
    }
  }
}

但是，问题来了。

如果在用户单击“ this.now后需要更改“ this.now ，则必须更新this.now 。 但是你不能！ 这是一个属性，属性是纯净的。 Vue会抱怨mutating a property

因此，现在您可以引入一个data variable来确定用户是否单击了类似按钮：

data() {
  return {
    liked: 0
  }
}

现在我们可以更新计算属性：

likes: {
  get: function() {
    return this.now + this.liked
  }
}

但是，我们喜欢什么？ 现在我们需要另一个属性：

props: {
  id: {
    type: Number,
    required: true
  },
  now: {
    type: Number,
    required: true
  }
}

然后添加一个方法：

methods: {
  add: function() {
    //axios?
    axios.post(`/api/articles/${this.id}/like`)
      .then (response => {
        // now we can update our `liked` proper

        this.liked = 1
      }).catch(error => {
        // handle errors if you need to
      )}
  }
}

并且，请确保单击我们的心脏会触发该事件：

<span class="entypo-heart" @click="add"> {{ now }}</span> 

最后，我们的likes组件需要我们文章中的id属性：

<likes now="{{ $article->likes }}" id="{{ $article->id }}"></likes> 

所有这些都到位； 你现在是个巫师，哈利。

编辑

应该注意的是，用户将永远能够一遍又一遍地喜欢上它。 因此，您需要对click函数进行一些检查，以确定他们是否喜欢它。 您还需要一个新的prop或computed property以确定它是否已经被喜欢。 这还不是全部。