I'm having trouble accessing data in Vue component I use prop to pass my data from view to component like this. I'm using Laravel.
<fav-btn v-bind:store="{{ $store }}"></fav-btn>
And my component looks like this:
<template>
<a href="#" class="btn-link text-danger" v-on:click="favorite">
<i v-bind:class="{ 'fa fa-heart fa-2x': isFavorited == true, 'fa fa-heart-o fa-2x': isFavorited == false }" class="" aria-hidden="true"></i>
</a>
</template>
<script>
export default {
props: ['store'],
data(){
return{
isFavorited: this.store.favoritable.isFavorited,
}
},
methods: {
favorite: function () {
this.AjaxRequest();
this.ToggleFav();
},
ToggleFav: function () {
this.isFavorited = !(this.isFavorited);
},
AjaxRequest: function () {
if (this.isFavorited)
{
axios.delete('stores/' + this.store.favoritable_id);
}
else {
axios.post('stores/' + this.store.favoritable_id);
}
}
}
}
</script>
In Vue devtools I can see all the objects in props but I can't access them the isFavorited always stays false. Am I accessing the objects attributes incorrectly?
You are doing it wrong. You shouldn't diractly mutate a value which is in store. You should write a mutator in the store file and change value by that. Here is the docs.
https://vuex.vuejs.org/en/mutations.html
Related
I am very new to Laravel and Vuex, I have a simple array of post on my page.
test 1
test 2
test 3
I am trying to link the text on the AppPost.vue component and show the post that has been clicked on a new component (AppShowpost.vue) on the same page. I believe I have to get the post by id and change the state? any help would be good. Thank you.
when you click test 1 it will show "test 1" on a new component (AppShowpost.vue)
In side my store timeline.js, I belive I need to get the post by id and change the state ?
import axios from 'axios'
export default {
namespaced: true,
state: {
posts: []
},
getters: {
posts (state) {
return state.posts
}
},
mutations: {
PUSH_POSTS (state, data) {
state.posts.push(...data)
}
},
actions: {
async getPosts ({ commit }) {
let response = await axios.get('timeline')
commit('PUSH_POSTS', response.data.data)
}
}
}
My AppTimeline.vue component
<template>
<div>
<app-post
v-for="post in posts"
:key="post.id"
:post="post"
/>
</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
export default {
computed: {
...mapGetters({
posts: 'timeline/posts'
})
},
methods: {
...mapActions({
getPosts: 'timeline/getPosts'
})
},
mounted () {
this.getPosts()
}
}
</script>
My AppPost.vue component. I need to link the post.body to display the post in my AppShowpost.vue component.
<template>
<div class="w-full inline-block p-4">
<div class="flex w-full">
<p>
{{ post.body }}
</p>
</div>
</div>
</template>
<script>
export default {
props: {
post: {
required: true,
type: Object
}
}
}
</script>
My AppSowpost.vue component that needs to display the post that is clicked.
<template>
<div>
// Displaypost ?
</div>
</template>
<script>
export default {
// Get post from id ?
}
</script>
Okay you can create a new state in your vuex "current_state", asyou said, you can dispatch a mutation by passing the id to the vuex.
state: {
posts: [],
current_state_id : null
},
In your mutations
set_state_id (state, data) {
state.current_state_id = data;
}
On your app post.vue, you can set a computed property that watches the current state
computed: {
currentState() {
return this.$store.getters["timeline/current_state_id"];
}}
And create a watcher for the computed property to display the current id/post
watch: {
currentState: function(val) {
console.log(val);
},
Maybe this will help you. First I will recommend to use router-link. Read about router link here if your interested. It is very helpful and easy to use. But you will have to define the url and pass parameter on our vue-route(see bellow).
1.You can wrap your post.body in router-link as follow.
//With this approach, you don't need any function in methods
<router-link :to="'/posts/show/' + post.id">
{{ post.body }}
</router-link>
2. In your AppSowpost.vue component, you can find the post in vuex state based on url params as follow.
<template>
<div> {{ thisPost.body }} </div>
</template>
// ****************
computed: {
...mapState({ posts: state=>state.posts }),
// Let's get our single post with the help of url parameter passed on our url
thisPost() { return this.posts.find(p => p.id == this.$route.params.id) || {}; }
},
mounted() { this.$store.dispatch("getPosts");}
3. Let's define our vue route.
path: "posts/show/:id",
name: "showpost",
params: true, // Make sure the params is set to true
component: () => import("#/Components/AppShowPost.vue"),
Your Mutations should look as simple as this.
mutations: {
PUSH_POSTS (state, data) {
state.posts = data;
}
},
Please let me know how it goes.
I am trying to check if a user is online so I can show a green circle
this is my template
<template>
<div>
<span class="fas fa-circle pull-right text-success" v-if="checkUser"></span>
<span class="fas fa-circle pull-right text-danger" v-else></span>
</div>
</template>
this is my script with props
<script>
export default {
name: "OnlineUser",
props: ['contact', 'onlineusers'],
data(){
return{
}
},
methods:{
},
computed:{
checkUser() {
return _.find(this.onlineusers, {id: this.contact});
},
},
mounted() {
},
created() {
}
}
</script>
when I check the vue dev tool, all the online users show in there but I tried saving the result of my function to see what it returns and it always return undefined intead of true or false
Well, the most easy way is to define it like this:
```<script>
window.loggedIn = {!! json_encode([
'signedIn'=>Auth::check(),
]) !!};
<script/>```
That way you will have a global variable named "loggedIn" that will give you true or false if the user is online or not.
Looks like you are using lodash to check if the user exists in the onlineusers array.
This is not an error, this is expected behavior, just like the docs say for the _.find() method:
Returns the matched element, else undefined.
I would recommend using the _.some() method:
checkUser() {
return _.some(this.onlineusers, ['id', this.contact.id});
}
Just like the docs say:
Returns true if any element passes the predicate check, else false.
This is my vue component code
<div v-if="$can('employee-create')" class="card-tools">
<router-link to="/admin/addphonebook" class="btn btn-success">
Add New
<i class="fa fa-phone"></i>
</router-link>
</div>
This is resources/assets/js/mixins/Permissions.vue file
export default {
methods: {
$can(permissionName) {
let route = window.routes.permission;
axios.get(route+`/${permissionName}`)
.then((resounse)=> {
return true;
})
.catch((error)=> {
return false;
});
},
},
};
This is resources/assets/js/app.js to import the mixin
import Permissions from './mixins/Permissions';
Vue.mixin(Permissions);
The $can function returning true but the 'Add New' button is not showing
v-if don't get the return true value
Anyone can help me?
Thanks in advance
#Csaba Gergely solved your problem. When you get data from server $can method return true once for a second or less, but after call $can steel returning false. You can create a variable called it success and store the axios call result.
It must be something like this
<div v-if="success" class="card-tools">
<router-link to="/admin/addphonebook" class="btn btn-success">
Add New
<i class="fa fa-phone"></i>
</router-link>
</div>
export default {
data(){
return {
success:false
}
},
methods: {
$can(permissionName) {
let route = window.routes.permission;
axios.get(route+`/${permissionName}`)
.then((resounse)=> {
this.success = true;
//return true;
})
.catch((error)=> {
this.success = false;
//return false;
});
},
},
P.S. Bocsi #Csaba Gergely, ha elhappoltam eloled a kerdest :(
I have passed this collection (postFavourite) to my vue component via 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"}]
How do I then check if any instance of user_id in the collection is equal to userId which is the current logged in user (also sent via props).
Tried
let pf = _.find(this.postFavourite, { "user_id": this.userId})
Keep getting undefined as the value of the pf variable even though this.userID is equal to 1.
New to JS and Vue.js so any help would be great.
Here is the vue component code.
<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.log("Post is :"+ this.postData)
console.log("User id is: "+ this.userId)
console.log("Favourite Object is :" +this.postFavourite);
console.log(this.postFavourite.find(pf => pf.user_id == this.userId));
},
methods: {
onClick() {
console.log(this.postData);
this.toggle = this.toggle ? 0 : 1;
}
}
}
</script>
This is how I passed the props to vue
<div id="app">
<favorite :post-data="'{{ $post->id }}'" :post-favourite="'{{Auth::user()->favourite }}'" :user-id="'{{ $post->user->id }}'"></favorite>
</div>
I gave up on lodash and find and just messed around with the data in the chrome console to work out how to check the value I wanted.
Then I built a loop to check for the value.
If it found it toggle the like heart on of not leave it off.
This will not be the best way to solve this problem but I'm just pleased I got my first real vue component working.
<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.log(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>
Where I pass my props.
<favorite :post-data="'{{ $post->id }}'"
:post-favourite="{{ Auth::user()->favourite }}"
:user-id="'{{ Auth::user()->id }}'"></favorite>
Thanks to all that tried to help me.
From just the code you provided, I see no issue. However lodash is not required for this problem.
Using ES2015 arrow functions
let pf = this.postFavourite.find(item => item.user_id === this.userId);
Will find the correct item in your array
You can read more about this function in the mdn webdocs
You can use find() directly on this.postFavourite like this:
this.postFavourite.find(pf => pf.user_id == this.userId);
Here is another way to do it that might help you as well.
[EDIT]
In order to use find() the variable needs to be an array, this.postFavourite is sent as a string if you didn't use v-bind to pass the prop thats what caused the error.
To pass an array or an object to the component you have to use v-bind to tell Vue that it is a JavaScript expression rather than a string. More informations in the documentation
<custom-component v-bind:post-favourite="[...array]"></custom-component>
I have a problem with Vue and component data function. It breaks even though all referenced prop data are correctly passed to the component and I can see them in vue-devtools. I am passing data from Laravel.
Vue Error:
[Vue warn]: Error in data(): "TypeError: Cannot read property 'isFavorited' of undefined"
found in
---> <FavBtn> at /Applications/MAMP/htdocs/decimacen.cz/resources/assets/js/components/FavBtn.vue
<Root>
FavBtn component:
<template>
<a href="#" class="btn-link text-danger" v-on:click="ToggleFav">
<i v-bind:class="{ 'fa fa-heart fa-2x': isFavorited == true, 'fa fa-heart-o fa-2x': isFavorited == false }" class="" aria-hidden="true"></i>
</a>
</template>
<script>
export default {
name: 'FavBtn',
props: ['fav'],
data(){
return{
isFavorited: this.fav.isFavorited,
favoritable_id: this.fav.favoritable_id,
}
},
methods: {
ToggleFav: function () {
this.AjaxRequest();
this.ToggleDOM();
},
ToggleDOM: function () {
this.isFavorited = !(this.isFavorited);
},
AjaxRequest: function () {
if (this.isFavorited)
{
axios.delete('favorites/' + this.favoritable_id)
}
else {
axios.post('favorites/' + this.favoritable_id);
}
}
}
}
</script>
Here is how I use the compnent in view:
<fav-btn v-bind:fav="{{ $user_store }}"></fav-btn>
All I want to know is if I have any mistakes in my code. Thanks.
Edit
Source:
<fav-btn v-bind:fav="{"favoritable_id":3,"favoritable_type":"App\\Store","created_at":"2017-05-24 16:12:33","updated_at":"2017-05-24 16:12:33","deleted_at":null,"isFavorited":true,"pivot":{"user_id":1,"favoritable_id":3},"users":[{"id":1,"email":"hagen#wagen.cz","permissions":[],"last_login":"2017-05-25 13:38:38","name":"Franta Hagen","currency_id":1,"sid":"1400076495925ae8d480b95925ae8d480c3","created_at":"2017-05-24 16:02:21","updated_at":"2017-05-25 13:38:38","deleted_at":null,"pivot":{"favoritable_id":3,"user_id":1}}]}"></fav-btn>