通过HTML中的json_encode填充Vue实例数据

Question

我正在将一个超级简单的AngularJS应用程序迁移到Vue 2学习练习中,并且在尝试迁移当前驻留在一个代码中的一些代码时遇到了障碍.ngInit

我有一个PHP后端,它将一个对象传递给视图,它被有效地处理了

<div ng-init="user = <?php echo json_encode($user); ?>" 

这会将$scope.user属性设置为用户对象.

我现在正试图在Vue中复制它.

根据我的阅读,我可以做以下事情:

<div :user="<?php echo json_encode($user); ?>" 

但也有人认为,props这样的应该仅适用于不可变数据,并且$user会稍微改变一下,我想这是错误的做法!

我目前得到了以下内容 - 这不起作用,因为通过dev-tools检查它显示用户undefined.

所以我的php模板有:

<div :setUser="<?php echo json_encode($user); ?>"

这会生成以下HTML:

:setUser="{"id":1,"name":"Lily","email":"lily@selesti.com","wants_food":0,"food_id":null,"food":null}"

我的javascript有:

window.App = new Vue({

    el: '#app',

    props: ['setUser'],

    data: {
        user: null
    },

    mounted() {
        this.user = this.setUser; // also tried JSON.parse(this.setUser);
    }
}

然而如上所述,无论何时检查,user总是undefined,不确定我做错了什么.

如果你想要一个小提琴,这里是一个:) https://jsfiddle.net/64yeaek1/3/

Answer 1

props用于将数据传递给组件,因为您没有编写组件,所以无法传递任何道具.没有内置的方法(据我可以告诉),为您从initilise HTML,而不是你应该使用一个ajax call由内而外产生的生命周期挂钩,以检索数据.Vue已经有一个很好的包来处理这个问题:https://github.com/pagekit/vue-resource

如果你真的想init从HTML中编写你自己的自定义指令:

Vue.directive('init', {
  bind: function(el, binding, vnode) {
    vnode.context[binding.arg] = binding.value;
  }
})

然后像这样使用它:

<div v-init:user="{name: 'fooBar'}">

这是JSFiddle:https://jsfiddle.net/hk7a2ba0/