Найдите подходящее значение в компоненте Vue
Я передал эту коллекцию (postFavourite) своему компоненту vue через props.
[{"id": 1, "user_id": 1, "post_id": 2, "created_at": "2018-07-24 09:11:52", "updated_at": "2018-07-24 09:11 : 52 "}]
Как мне затем проверить, равен ли какой-либо экземпляр user_id в коллекции userId, который является текущим вошедшим в систему пользователем (также отправленным через реквизиты).
Пытался
let pf = _.find(this.postFavourite, { "user_id": this.userId})
Продолжайте получать undefined как значение переменной pf, даже если this.userID равен 1.
Новичок в JS и Vue.js, поэтому любая помощь будет отличной.
Вот код компонента vue.
<template>
<div>
<i v-show = "this.toggle" @click = "onClick" style = "color: red" class = "fas fa-heart"></i>
<i v-show = "!(this.toggle)" @click = "onClick" style = "color: white" class = "fas fa-heart"></i>
</div>
</template>
<script>
export default {
data() {
return {
toggle: 0,
}
},
props: ['postData', 'postFavourite', 'userId'],
mounted() {
console.info("Post is :"+ this.postData)
console.info("User id is: "+ this.userId)
console.info("Favourite Object is :" +this.postFavourite);
console.info(this.postFavourite.find(pf => pf.user_id == this.userId));
},
methods: {
onClick() {
console.info(this.postData);
this.toggle = this.toggle ? 0 : 1;
}
}
}
</script>
Вот как я передал реквизит vue
<div id = "app">
<favorite :post-data = "'{{ $post->id }}'" :post-favourite = "'{{Auth::user()->favourite }}'" :user-id = "'{{ $post->user->id }}'"></favorite>
</div>
Да. Это требуется в bootstrap.js.
Не могли бы вы опубликовать дополнительный код. Конкретно ваш установленный метод и данные
Я просто пытаюсь получить из коллекции, понравилось ли сообщение пользователю, чтобы я мог правильно установить переключатель.
Вы скопировали, и ошибка из ответа ниже pf => pf.user_id = this.userId должна быть pf => pf.user_id == this.userId. Решает ли это проблему?
Та же ошибка, что и раньше.
Изменил ошибку и в моем посте. Спасибо
Похоже, this.postFavourite - это не массив. Каков результат того, что вы это зарегистрируете?
Ответы 3
Вы можете использовать find() непосредственно на this.postFavourite следующим образом:
this.postFavourite.find(pf => pf.user_id == this.userId);
Вот - еще один способ сделать это, который также может вам помочь.
[РЕДАКТИРОВАТЬ]
Чтобы использовать find(), переменная должна быть массивом, this.postFavourite отправляется в виде строки, если вы не использовали v-bind для передачи свойства, которое и вызвало ошибку.
Чтобы передать массив или объект компоненту, вы должны использовать v-bind, чтобы сообщить Vue, что это выражение JavaScript, а не строка. Дополнительная информация в документации
<custom-component v-bind:post-favourite = "[...array]"></custom-component>
все выдают эту ошибку app.js: 1100 [Vue warn]: Ошибка в смонтированном хуке: "TypeError: this.postFavourite.find не является функцией"
не могли бы вы рассказать, как передать реквизиты компоненту? чтобы передать массив в качестве опоры, вы должны использовать v-bind Я отредактировал ответ. Посмотрите на эта ссылка на документацию, как это реализовать
Добавлено в конец сообщения.
Вы уверены, что this.postFavourite - это массив? как @Josh сказал в предыдущих комментариях. Попробуйте с json_encode(Auth::user()->favourite->toArray()). Вы можете использовать библиотеку управления состоянием, такую как vuex, чтобы упростить передачу значений между компонентами и получить данные от контроллера для их форматирования, как вы хотите.
Изменится ли что-то, если вы отправите его без кавычек? не уверен, нужны ли они. Вот такой вот :post-favourite = "{{Auth::user()->favourite }}" вместо :post-favourite = "'{{Auth::user()->favourite }}'"
Он передается как объект, а не как данные типа json.
В devtools это postFavourite: Array [1], и значения раскрываются ниже в парах ключ-значение.
Позвольте нам продолжить обсуждение в чате.
Исходя только из предоставленного вами кода, я не вижу проблем. Однако для этой проблемы lodash не требуется.
Использование стрелочных функций ES2015
let pf = this.postFavourite.find(item => item.user_id === this.userId);
Найдет нужный элемент в вашем массиве
Вы можете узнать больше об этой функции в mdn webdocs
Я пробовал это, но получил эту ошибку. app.js: 1100 [Vue warn]: Ошибка в смонтированном хуке: "TypeError: this.postFavourite.find не является функцией"
Я отказался от lodash и нашел и просто возился с данными в консоли Chrome, чтобы выяснить, как проверить значение, которое я хотел.
Затем я построил цикл для проверки значения. Если он обнаружил, что он включил подобное сердце или не оставил его выключенным.
Это не лучший способ решить эту проблему, но я просто рад, что мой первый настоящий компонент vue заработал.
<template>
<div>
<i v-show = "this.toggle" @click = "onClick" style = "color: red" class = "fas fa-heart"></i>
<i v-show = "!(this.toggle)" @click = "onClick" style = "color: white" class = "fas fa-heart"></i>
</div>
</template>
<script>
export default {
props: ['postData', 'postFavourite', 'userId']
,
data() {
return {
toggle: 0,
favs: [],
id: 0
}
},
mounted () {
var x
for(x=0; x < this.postFavourite.length; x++){
this.favs = this.postFavourite[x];
if (this.favs['post_id'] == this.postData) {
this.toggle = 1
this.id = this.favs['id']
}
}
},
methods: {
onClick() {
console.info(this.postData)
if (this.toggle == 1){
axios.post('favourite/delete', {
postid: this.id
})
.then(response => {})
.catch(e => {
this.errors.push(e)
})
}
else if (this.toggle == 0){
axios.post('favourite', {
user: this.userId,
post: this.postData
})
.then(response => {
this.id = response.data
})
.catch(e => {
this.errors.push(e)
})
}
this.toggle = this.toggle ? 0 : 1;
}
}
}
</script>
Где я передаю свой реквизит.
<favorite :post-data = "'{{ $post->id }}'"
:post-favourite = "{{ Auth::user()->favourite }}"
:user-id = "'{{ Auth::user()->id }}'"></favorite>
Спасибо всем, кто пытался мне помочь.
Вы используете lodash?