通过HTML

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应仅用于不可变数据，而undefined会稍微改变一点，我想这是错误的做法！

我目前得到了以下内容 - 这不起作用，因为通过开发工具进行检查时，它会将用户显示为<div :setUser="<?php echo json_encode($user); ?>" 。

所以我的php模板有：

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

这将生成以下HTML：

window.App = new Vue({

    el: '#app',

    props: ['setUser'],

    data: {
        user: null
    },

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

我的javascript有：

user

然而如上所述，每次检查时，undefined总是null，不确定我做错了什么。

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

Answer 1

props用于将数据传递给组件，因为您没有编写组件，所以无法传递任何道具。没有内置的方法（据我所知）你可以从HTML初始化，而是应该使用created lifecycle hook内的ajax call来检索你的数据。 Vue已经有了一个很好的包来处理这个问题：https://github.com/pagekit/vue-resource

如果您真的想从HTML init开始编写自己的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/

Answer 2

如果您要更改父级中的setUser并希望在数据变量中获得更改的setUser，则必须在setUser上放置一个观察者，并将数据变量设置为watcher，如下所示：

window.App = new Vue({

    el: '#app',

    props: ['setUser'],

    data: {
        user: null
    },

    mounted() {
        this.user = this.setUser; // also tried JSON.parse(this.setUser);
    },
    watch: {
      setUser: function(newVal) {
        this.user = newVal
      }
    } 
}

您也可以查看此answer。