时间戳

首页 > 解决方案 > 如何从 php 获取数据以添加 vue 的 json 数据？

php - 如何从 php 获取数据以添加 vue 的 json 数据？

问题描述

朋友们，我使用v-if了vue js的属性。当我foreach与 php 一起使用时，我检查 value 是否为trueor false。现在，我必须将 php 数据添加到 vue js 的数据中，否则会出错。

例如错误它说breaking_bad undefined。我想说，{{ ( $value->slug ) ? $value->slug:''}} 没有value.

我必须将数据从 php 转发到 vue js；

提前致谢


// My laravel foreach code

@foreach( App\Models\AdvertisementCategories::all() as $value )
                                    <div class="row" v-if="{{ $value->slug }}" data-value="{{$value->slug}}">
                                        <div class="col-md-12">
                                            <h5 class="bg-secondary p-3 advertisement" id="{{$value->id}}" style="cursor:pointer">{{$value->title}} :</h5>
                                            <div class="row advertisement_category_features" v-if="{{$value->slug}}" id="{{$value->id}}">
                                                @foreach( $value->features as $value )
                                                <div class="col-3">
                                                    <label class="kt-checkbox kt-checkbox--bold kt-checkbox--success">
                                                        <input type="checkbox" name="advertisement_category_features[]" value="{{$value->id}}"> {{$value->title}}
                                                        <span></span>
                                                    </label>
                                                </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach


// My vue js code

var self = this;

const app = new Vue({
    el: '#app',
    name: 'Add Advertisement',
    data: {
        advertisement_type: '',number: true,date: true,sales_type: true,meter: true,
        room: true,year_built: true,heating: true,deposit: true,pool_size: true,
        baths: true,garages: true,last_remodel_year: true,floor: true,floor_location: true,
        dues: true,within_the_site: true,is_furnished: true,is_eligible_credit: true,
        swap: true,using_status: true,workspace: true,kitchen_number:true,
        cephe: true,konut:true,bina:true,banyo:true,sosyal:true,manzara:true,ulasim:true,
        mutfak:true,yapi:true,balkon:true,dekorasyon:true,genel:true,
    },
    methods:{
        advertisement_categories: function(advertisement_categories){
            return advertisement_categories;
        },
        advertisement: function(value){
            this.advertisement_type = value;
            if( this.advertisement_type == "arsa" ){
                this.letTrue();
                this.land();
            }else if( this.advertisement_type == "workplace" ) {
                this.letTrue();
                this.workplace(false);
            }else if( this.advertisement_type == "housing" ) {
                this.letTrue();
                this.housing();
            }
        },
});

标签： phpjsonlaravelvue.js

解决方案

为了将数据从 PHP 转发到 Vue，您有多种选择。如果你的 Vue JS 代码是在 Blade 视图中生成的，你可以直接将数据渲染到 Vue 组件中。

另一种选择是在全局范围内定义共享数据层。例如：window.myData = {{ json_encode($phpVarWithData) }}。您可以在视图文件中执行此操作。

甚至另一种选择（尤其是对于小数据）是在您的视图中使用 HTML 数据属性，就像您已经做的那样。您应该阅读 Vue 的 livecycle 挂钩中的数据属性：https ://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks

实际上，v-if="{{ $value->slug }}"对我来说看起来有点奇怪。你想用这个代码归档什么？表达式计算结果为trueif$value->slug不为空。但我的猜测是这个值永远不会是空的，所以v-if是多余的。

推荐阅读