将php变量作为道具传递给vue组件答案

【问题标题】：Passing php variables as props to vue component将php变量作为道具传递给vue组件
【发布时间】：2020-01-08 16:12:32
【问题描述】：

我查看了有关此问题的其他一些帖子，但他们的解决方案似乎无法解决我的问题。

这些语法都适用于我获取变量的值：

:venueIdProp=" <?php echo $id ?> " :venueIdProp=" {{ $id }} " :venueIdProp=" {!! $id !!} "

但是，当向下传递道具时，它显示为未定义。

//Test will show up when passing test="test"

<template>
    <div> {{venueIdProp}} {{test}} </div> 
</template>

module.exports = {
    props: ['venueIdProp', 'test'],
    data: () => {
        return {}
  },
  mounted(){
    console.log(this.venueIdProp) // returns undefined
  }
}

PHP 文件

@extends('layouts.admin')


@section('content')

    <div id="VenueApp">
        <venue-app venueIdProp="{{ $id }}"></venue-app>
    </div>

    <script>
        new Vue({
            el: "#VenueApp",
            components: {
                "venue-app": httpVueLoader("/js/Vue/screens/venue/VenueApp.vue")
            }
        })
    </script>

@endsection

我的道具有什么问题吗？

【问题讨论】：

标签： vue.js vuejs2 laravel-blade

【解决方案1】：

https://vuejs.org/v2/guide/components-props.html

HTML 属性名称不区分大小写，因此浏览器会将任何大写字符解释为小写。这意味着当您使用 DOM 内模板时，camelCased 道具名称需要使用其 kebab 大小写（连字符分隔）等效项。

试试：

<venue-app venue-id-prop="{{ $id }}"></venue-app>

或者，如果您需要 prob 是 Javascript 数字：

<venue-app :venue-id-prop="{{ $id }}"></venue-app>

【讨论】：

感谢您的详细解答！这真的很有帮助！