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

您需要在bind hook函数中编写指令代码。（Reference）

绑定：

当指令首次绑定到元素时，
只调用一次。这是您可以进行一次性设置工作的地方。

所以你的代码应该是：

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

Answer 2

使用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()功能。很漂亮。

Vue2：自定义指令与v-if一样

2 个答案: