时间戳

首页 > 解决方案 > 将php变量作为道具传递给vue组件

vue.js - 将php变量作为道具传递给vue组件

问题描述

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

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

: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.jsvuejs2laravel-blade

解决方案

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>

推荐阅读