Laravel - 将多个值传递给 Vue

Question

我的 .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>

我的.blade:

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

由于某种原因，只有 photog-Id 值被传递，而其他两个没有被传递..为什么？

另外，当我编译css和js时，我是否必须仅将已编译的上传到我的服务器，还是将未编译的上传到我的服务器？

Answer 1

由于您在 Blade 文件中使用 kebab-case 作为 props，因此您需要在 vue 文件中使用 CamelCase。更具体地说:

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

你的异步调用就变成了

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

此外，编译的文件应该被 git 忽略。当您部署新版本的 js/css 文件时，您的部署工具应该负责编译它们并将它们添加到项目的 public 文件夹中。