A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Directivas Personalizadas

36/53
Recursos

Aportes 10

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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.

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.

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

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.

馃憣