Vue2：自定义指令，如 v-if

Question

我正在尝试创建一个像 v-if 这样的自定义指令，因此它只会在传递给元素的数据不为空时呈现。例如：

<div v-if="!_.isEmpty(data.employer)">{{ data.employer.name }}</div>

仅当 data.employer 不为空时才会呈现，因此不会引发引用错误。我正在尝试创建一个指令，将其简化为 v-notEmpty="data.employer" 并在指令内运行逻辑，但问题是它在呈现元素后对自定义指令执行挂钩，因此它会引发参考错误雇主未定义。

有什么方法可以让自定义指令与 v-if 完全一样，它在实际创建元素之前运行逻辑。这是我到目前为止所拥有的：

    Vue.directive('notEmpty', (el, binding) => {
  if (_.isEmpty(binding.value)) {
    el.style.display =  'none';
  } else {
    el.style.display =  'initial';
  }
});

Answer 1

一旦你使用了 Lodash，_.get() 函数可能是一个更简单的解决方案。它提供了对嵌套对象属性的安全访问。一个简单的例子：

new Vue({
    data: {
        employer: {
            name: {
              first: 'Eric',
              last: '',
            },
            age: 26
        }
    },

    methods: {
        /**
         * Check if a property exists and returns a boolean
         * 
         * @param {String} e Path to check
         * @param {Object} o Object to be accessed
         * 
         * @return {Boolean}
         */
        notEmpty(o, e) {
            let getResult = _.get(o, e);
            return !(getResult == false || getResult == null || getResult == '' || getResult == undefined);
        }
    }
}).$mount('#app');

<div id="app">
  <p v-if="notEmpty(employer, 'name.first')">{{employer.name.first}}</p>
  <p v-else>First name not informed</p>
  
  <p v-if="notEmpty(employer, 'name.last')">{{employer.name.last}}</p>
  <p v-else>Last name not informed</p>
  
  <!-- Age will not appear, once is not defined -->
  <p v-if="notEmpty(employer, 'age')">{{employer.age}}</p>
  <p v-else>Age not informed</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
<script src="https://unpkg.com/vue@2.5.17/dist/vue.min.js"></script>

查看Lodash _.get() 函数。太牛了。

Answer 2

您需要在绑定钩子函数中编写指令代码。 (Reference)

绑定：

仅在指令第一次绑定到元素时调用一次。在这里您可以进行一次性设置工作。

所以你的代码应该是：

Vue.directive('notEmpty', {
  bind: function (el, binding, vnode) {
    if (_.isEmpty(binding.value)) {
      el.style.display =  'none';
    } else {
      el.style.display =  'initial';
    }
  }
});