Directivas Personalizadas

la directiva :key es muy importante para éstos casos.

Cuando realice una búsqueda después de otra, la segunda recordaba el blur de la primera, la solución fue aplicar :key=“t.id” para que Vuejs reconociera correctamente las nuevas pistas. y refrescara la blur directiva.

Interesante, prácticamente las directivas me permiten ejecutar cierto código cuando el componente está cargando

yo pense que era mas conveniente NO mostrar los Track que no tienen valor para escuchar, por lo que agregue en el método search (dentro de la vista search)

this.tracks=this.tracks.filter(v=>v.preview_url!=null)

y así dejo solo los que se puede escuchar, de todas formas agregue lo de esta clase.

Un recuerso actualizado: https://vuejs.org/guide/reusability/custom-directives.html#introduction

Aqui les dejo como quedo mi blur.js y mi blur.ts por la costumbre escribe la directiva en typescript 😂

// Blur.js
const blur = {}

function setBlur (el, binding) {
  !binding.value && (() => {
    el.style['filter'] = 'blur(3px)'
    el.style['cursor'] = 'not-allowed'

    el.querySelectorAll('a').forEach(a => a.setAttribute('disable', ''))
  })()
}

blur.install = Vue => Vue.directive('blur', { bind: setBlur })

export default blur

// Blur.ts
import { VNodeDirective, VueConstructor } from "vue";

function setBlur (el: HTMLElement, binding: VNodeDirective) {
    !binding.value && (() => {
        el.style['filter'] = 'blur(3px)'
        el.style['cursor'] = 'not-allowed'

        el.querySelectorAll('a').forEach(a => a.setAttribute('disable', ''))
    })()
}

const blur = {
    install (Vue: VueConstructor) {
        Vue.directive('blur', {
            bind: setBlur
        })
    }
}

export default blur

Alguien más con este error?

[Vue warn]: Failed to resolve directive: blur

const blur = {}

function setBlur (el, binding) {
  el.style.filter = !binding.value ? 'blur(3px' : 'none'
  el.style.cursor = !binding.value ? 'not-allowed' : 'inherit'

  el.querySelectorAll('a').forEach(a => {
    if (!binding.value) {
      a.setAttribute('disabled', true)
    } else {
      a.removeAttribute('disabled')
    }
  })
}

blur.install = function (Vue) {
  Vue.directive(blur, {
    bind (el, binding) {
      setBlur(el, binding)
    }
  })
}

export default blur

Interesante esto de las directivas. cambiar el comportamiento de los elementos dependiendo del valor en la data

si deseara cambiar el style completo de un elemento como podria asignar esta directiva?.

si deseara cambiar el atributo class completo de un elemento como podría asignar esta directiva?.

Además del conjunto predeterminado de directivas incluidas en el núcleo (v-model y v-show), Vue también le permite registrar sus propias directivas personalizadas. la forma primaria de reutilización y abstracción del código son los componentes; sin embargo, puede haber casos en los que necesite un acceso al bajo nivel al DOM en elementos simples, y aquí es donde las directivas personalizadas seguirían siendo útiles.

👌