Nano Hash - криптовалюты, майнинг, программирование

Имитация директивы v-if в пользовательской директиве

Мне нужно уничтожить элемент в пользовательской директиве, такой как v-if. (Запретить создание элемента, если условие не выполняется.)

я пытаюсь это

export const moduleDirective: DirectiveOptions | DirectiveFunction = (el, binding, vnode) => {
  const moduleStatus = store.getters[`permissions/${binding.value}Enabled`];
  if (!moduleStatus) {
    const comment = document.createComment(' ');
    Object.defineProperty(comment, 'setAttribute', {
      value: () => undefined,
    });
    vnode.elm = comment;
    vnode.text = ' ';
    vnode.isComment = true;
    vnode.context = undefined;
    vnode.tag = undefined;

    if (el.parentNode) {
      el.parentNode.replaceChild(comment, el);
    }
  }
};

Но этот вариант меня не устраивает. Это не прерывает создание компонента.

введите описание изображения здесь

этот код удаляет элемент из DOM, но не уничтожает экземпляр компонента.

vue.js vuex vue-router vuejs2 vue-component
22.12.2018

  • как не использовать параметр рендеринга компонента vue? 22.12.2018
  • @perymimon да. Мне нужно уничтожить элемент без инициализации. 23.12.2018
  • @Mgorunuch, ты смог найти решение своей проблемы? Я сталкиваюсь с тем же. 17.08.2019

Ответы:


1

Я не проверял это, но из документа это должно выглядеть так.< br> наверное отредактирую позже с более конкретным и правильным ответом

Vue.directive('condition', {


  inserted(el, binding, vnode, oldVnode){
    /* called when the bound element has been inserted into its parent node
      (this only guarantees parent node presence, not necessarily in-document). */

     if (!test){ el.remove() }
  }


  update(el, binding, vnode, oldVnode ){
    /* called after the containing component’s VNode has updated, but possibly before 
       its children have updated. */

     if (!test()){ el.remove() }
    //or you can try this, changed the vnode
    vnode.props.vIf = test();
  }
}

Или короче

Vue.directive('condition', function (el, binding) {
  if (!test){ el.remove() }
})

Помимо el, вы должны рассматривать эти аргументы как доступные только для чтения и никогда не изменять их. Если вам нужно обмениваться информацией между хуками, рекомендуется делать это через набор данных элемента.

24.12.2018
  • Я могу ошибаться, но при всем уважении, я не думаю, что это действительно отвечает на вопрос. В ОП упоминалось, что желаемая функциональность заключается в предотвращении создания элемента DOM, если условие не выполняется (например, предотвращение загрузки изображения, аналогично тому, что произойдет при использовании директивы v-if). Этот ответ удаляет элемент, но ресурс изображения уже загружен. 17.08.2019
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..