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

【问题标题】：how can i get data from php to add json data of vue?如何从 php 获取数据以添加 vue 的 json 数据？
【发布时间】：2020-02-24 12:30:34
【问题描述】：

朋友们，我使用了 vue js 的 v-if 属性。当我在 php 中使用foreach 时，我检查值是true 还是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();
            }
        },
});

【问题讨论】：

请考虑再次解释问题，重新表述整个问题，因为它几乎无法阅读。

标签： php json laravel vue.js

【解决方案1】：

为了将数据从 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 }}" 在我看来有点奇怪。你想用这个代码归档什么？如果$value->slug 不为空，则表达式的计算结果为true。但我的猜测是这个值永远不会是空的，所以 v-if 是多余的。

【讨论】：