Question

我正在尝试为我的Vue应用程序创建一个autovivification指令。

基本上，如果我的data有一个user对象，例如{user:{}}，然后创建以下输入：

<input type="text" v-model="user.info.name.first" v-autovivify>

我的指令将自动在用户对象内创建所需的路径，例如user.info.name.first（类似于Angular 1.0的工作方式）

我的问题是，在调用v-autovivify指令之前，v-model已经求值并抛出错误：

[Vue warn]: Error in render: "TypeError: Cannot read property 'name' of undefined"

但是我确实知道这是可以做到的，因为这是我现在用来自动保存对象的一个技巧：

vivify方法仅创建嵌套对象并返回true

methods: {
   vivifyUser() {
        //this should of course check if the path exist but removed for brevity.
        this.user = {name: {first: {salut: ''}}};
        return true;
   }
   // other methods, etc...

这意味着v-if在评估v-model之前被调用，因此我能够创建路径并且不会引发错误。

所以我的问题是如何将指令的优先级设置为高于v-model （就像v-if具有优先级一样）？

Answer 1

添加v-if以延迟元素的呈现。

<input v-if='user.info' type="text" v-model="user.info.name.first" v-autovivify>

或更笼统

<input v-if='user && user.info' type="text" v-model="user.info.name.first" v-autovivify>

这是使用异步计算属性时常用的模式。

Vuejs 2终端指令还是更高优先级的指令？

1 个答案: