Question

我已经查看了有关此问题的其他几篇文章，但是他们的解决方案似乎无法解决我的问题。

这些语法都对我有用，以获取变量的值：

: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

我的道具有问题吗？

Answer 1

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

HTML属性名称不区分大小写，因此浏览器会将所有大写字符解释为小写。这意味着当您使用In-DOM模板时，骆驼式道具名称需要使用kebab大小写（连字符分隔）。

尝试：

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

或者如果您需要将概率作为Java脚本编号：

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

将php变量作为prop传递给vue组件

1 个答案: