Laravel - 将多个值传递给 Vue答案

【问题标题】：Laravel - Pass multiple values to VueLaravel - 将多个值传递给 Vue
【发布时间】：2020-07-30 04:06:43
【问题描述】：

我的 .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 时，我必须只将已编译的或未编译的上传到我的服务器吗？

【问题讨论】：

试试这个
@adrshk 谢谢.. 不幸的是没有运气.. 我在控制台中收到此错误：Error compiling template: invalid expression: Invalid or unexpected token in 2AMJJK1 Raw expression: :photog-id="2AMJJK1"
@adrshk，这些道具不是反应式的，所以他不必绑定它们，即使用:或v-bind:
@kidA 好的，谢谢 :)

标签： laravel vue.js axios

【解决方案1】：

由于您在刀片文件中使用 kebab-case 作为道具，因此您需要在 vue 文件中使用 camelCase。更具体地说：

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

你的异步调用变成了

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

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

【讨论】：

感谢您的回答！不幸的是它不起作用..我在控制台中看到了这个：GET www.mysite.com/2AMJJK1/undefined/undefined/like 500
这比你以前的要好，因为现在它可以成功编译模板而没有任何错误。您是否测试过您的$gallery->galcode 和$photo->filename 是否产生实际值？在 kebab case 中，所有字母都以小写字母书写，单词之间用连字符或减号分隔，而在 camelCase 中，复合词中的每个单词都大写，第一个单词除外。
谢谢！是的，它们产生值..这是来自浏览器中页面的来源：` `
看起来新的 app.js 文件被忽略了。我用 console.log 替换了 axios 部分，它仍然给出与上面相同的错误。它是否以某种方式保存在缓存中？跨度>
我明白了，原因是浏览器会缓存这些资产，因此他们不必在每次刷新页面时都重新下载它们。解决这个问题的一种方法是在脚本标签的末尾添加一个随机字符串，即<script src='my_lib.js?v=109213></script>，每次有新版本时都会更新。这样，浏览器就会知道它不能使用缓存的版本，它会获取最新的版本。