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

Question

我正在迁移一个 super 简单的 AngularJS应用到Vue 2作为学习练习，在尝试迁移当前驻留在 ngInit 中的一些代码时遇到了困难

我有一个 PHP将对象传递给 View 的后端，它的有效处理方式如下

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

这将设置 $scope.user用户对象的属性。

我现在正尝试在 Vue 中复制它。

根据我读过的内容，我可以做类似的事情:

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

但也有人建议 props像这样应该只适用于不可变数据，并且 $user会改变一点，我想那是错误的做法!

我目前有以下内容 - 这是行不通的，因为当通过开发工具检查时，它显示用户为 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 ，不确定我做错了什么。

如果你想要 fiddle ，这里有一个:) https://jsfiddle.net/64yeaek1/3/

Answer 1

props 用于将数据传递给组件，因为您不是在编写组件，所以您不能传递任何 props。没有内置方法(据我所知)可让您从 HTML 初始化，相反您应该使用 created lifecycle hook 内部的 ajax 调用检索您的数据。 Vue 已经有一个很好的包来处理这个:https://github.com/pagekit/vue-resource

如果您真的想从 HTML 中初始化，可以编写您自己的 custom directive :

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/