Question

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

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

我将“ like”图标作为组件：

<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，以此方式，我可以将数据库中的数据作为起始值（now包含数据库行值），问题是，我不知道在哪里，如何在应用程序中保留该值，我还将在其中使用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的值传递给名为data的属性内的like函数，因此，如果我理解正确，那么变量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。但是你不能！这是一个属性，属性是纯净的。 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来确定它是否已经被喜欢。这还不是全部。

VueJs + Laravel-类似于按钮组件

1 个答案: