Laravel - Pass multiple values to Vue

Question

part of my .vue:

<script>
export default {
    props: ['photog-Id', 'gal-Id', 'photo-Id'],
    mounted() {
        console.log('Component mounted.')
    },

    methods: {
        setfavorite(){
            axios.get('/' + this.photog-Id + '/' + this.gal-Id + '/' + this.photo-Id + '/like')
                .then(response => {
                    alert(response.data);
                });
        }
    }
}
</script>

my .blade:

<div>
   <set-fav photog-Id="{{$gallery->user->phcode}}" gal-Id="{{$gallery->galcode}}" photo-Id="{{$photo->filename}}" ></set-fav>
</div>

for some reason only photog-Id value gets passed, while the other two are not being passed.. why?

also, when i compile css and js, do i have to upload only the compiled ones or also the uncompiled ones to my server?

Try this <div> <set-fav :photog-Id="{{$gallery->user->phcode}}" :gal-Id="{{$gallery->galcode}}" :photo-Id="{{$photo->filename}}"> </set-fav> </div> — adarshk, Commented Apr 16, 2020 at 19:33
@adrshk thanks.. unofrtunately no luck.. i get this error in console: Error compiling template: invalid expression: Invalid or unexpected token in 2AMJJK1 Raw expression: :photog-id="2AMJJK1" — sharkyenergy, Commented Apr 16, 2020 at 19:50
@adrshk, these props are not reactive so he doesn't have to bind them i.e. use : or v-bind: — kidA, Commented Apr 16, 2020 at 19:55

kidA · Accepted Answer · 2020-04-16 19:54:49Z

2

Since you are using kebab-case for your props in your blade file you need to use camelCase in your vue file. More specifically:

props: ['photogId', 'galId', 'photoId']

and your async call becomes

axios.get('/' + this.photogId + '/' + this.galId + '/' + this.photoId + '/like')

Also, the compiled files should be git-ignored. When you deploy a new version of your js/css files your deployment tool should take care of compiling them and adding them to the public folder of your project.

answered Apr 16, 2020 at 19:54

kidA

1,3871 gold badge9 silver badges20 bronze badges

Thanks for your answer! unfortunately it does not work.. i see this in console: GET www.mysite.com/2AMJJK1/undefined/undefined/like 500
– sharkyenergy
Commented Apr 16, 2020 at 20:03
That's better to what you were having before since now it compiles the template successfully without any errors. Have you tested whether your $gallery->galcode and $photo->filename produce actual values? In kebab case, all letters are written in lower case and the words are separated by a hyphen or minus sign whereas in camelCase, each word within a compound word is capitalized except for the first word.
– kidA
Commented Apr 16, 2020 at 20:10
Thank you! yes they produce values.. this is from the source of the page in the browser: ` <set-fav photog-Id="2AMJJK1" gal-Id="D1C8652A" photo-Id="IMG_4432-Modifica.png" ></set-fav>`
– sharkyenergy
Commented Apr 16, 2020 at 20:13
It looks like the new app.js file is ignored.. i replaced the axios part with console.log and it still gives the same error as above.. is it somehow saved in cache?
– sharkyenergy
Commented Apr 16, 2020 at 20:17
1

I see, the reason is that browsers cache the assets so they don't have to re-download them every time you refresh the page. A way to overcome this, is to stick a random string at the end of your script tag i.e. <script src='my_lib.js?v=109213></script> that will be updated each time you have a new version. This way, the browser will know that it cannot use a cached version and it will fetch the newest one.
– kidA
Commented Apr 16, 2020 at 20:50

| Show 3 more comments

Collectives™ on Stack Overflow

Laravel - Pass multiple values to Vue

1 Answer 1

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Related