VueJs + Laravel - как компонент кнопки - PullRequest
Новая
       6

VueJs + Laravel - как компонент кнопки

0 голосов
/ 30 октября 2018

Я пытаюсь получить хорошее представление о VueJS, и я использую его с Laravel 5.7 для личного проекта, но я не могу точно понять, как выполнить, возможно, простое задание «как» кнопка \ значок.

Итак, вот ситуация, у меня есть страница, отображающая различные сообщения из моей базы данных, и в нижней части каждого сообщения я хочу кнопку "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, благодаря тому, что я до сих пор понимаю о компонентах, таким образом, я могу вставить данные из моей базы данных в качестве начального значения (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 функции 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? (Я имею в виду, я не спрашиваю, как выполнять эти отдельные задачи, просто где \ как реализовать это в этой ситуации). Я правильно понимаю компонентную логику?

1 Ответ

0 голосов
/ 31 октября 2018

Вероятно, немного больше многословия никогда не повредит: 

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, чтобы определить, понравился ли он вам. Это еще не весь день.

...