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

Posted 2023-02-22

【中文标题】如何从 php 获取数据以添加 vue 的 json 数据？

【英文标题】：how can i get data from php to add json data of vue?

【发布时间】：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();
            
        ,
);

【问题讨论】：

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

【参考方案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 是多余的。