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
– 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
– 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
– 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

Sign up to request clarification or add additional context in comments.

8 Comments

sharkyenergy Over a year ago

Thanks for your answer! unfortunately it does not work.. i see this in console: GET www.mysite.com/2AMJJK1/undefined/undefined/like 500

kidA Over a year ago

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.

sharkyenergy Over a year ago

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 Over a year ago

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?

kidA Over a year ago

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.

|

Collectives™ on Stack Overflow

Laravel - Pass multiple values to Vue

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related