Vue: Subclasse de matriz de suporte

Criado em 27 dez. 2018 · 3Comentários · Fonte: vuejs/vue

Versão

2.5.21

Link de reprodução

https://codepen.io/AmrIKhudair/pen/NevxML

Passos para reproduzir

1- criar uma classe de extensão Array e adicionar um método personalizado
2- instanciar uma nova instância da classe e adicioná-la aos dados
3- tente chamar o método na instância do template

O que é esperado?

O método foi executado com sucesso

O que realmente está acontecendo?

Erro não é uma função

feature request

Fonte

AmrIKhudair

👍1

Comentários muito úteis

@AmrIKhudair
Eu também precisava disso e fiz com que funcionasse no terreno do usuário. Quando o Vue 3 chegar, você pode removê-lo.

export function makeReactive (obj) {
  // eslint-disable-next-line no-proto
  const proto = obj.__proto__

  Object.defineProperty(obj, '__proto__', {
    get () { return proto },
    // eslint-disable-next-line no-proto
    set (newValue) { proto.__proto__ = newValue }
  })
}

import { makeReactive } from 'util'

export default class UserCollection extends Array {
  constructor (...args) {
    super(...args)

    makeReactive(this)
  }
}

edcoreweb em 21 fev. 2019

👍5 🚀2

Todos 3 comentários

O Vue 2 atualmente não oferece suporte a subclasses de Array (o ramo de desenvolvimento do Vue 3 já oferece). Vou converter isso em uma solicitação de recurso.

yyx990803 em 27 dez. 2018

@AmrIKhudair
Eu também precisava disso e fiz com que funcionasse no terreno do usuário. Quando o Vue 3 chegar, você pode removê-lo.

export function makeReactive (obj) {
  // eslint-disable-next-line no-proto
  const proto = obj.__proto__

  Object.defineProperty(obj, '__proto__', {
    get () { return proto },
    // eslint-disable-next-line no-proto
    set (newValue) { proto.__proto__ = newValue }
  })
}

import { makeReactive } from 'util'

export default class UserCollection extends Array {
  constructor (...args) {
    super(...args)

    makeReactive(this)
  }
}

edcoreweb em 21 fev. 2019

👍5 🚀2

@edcoreweb
Muito obrigado

AmrIKhudair em 22 fev. 2019

Esta página foi útil?

0 / 5 - 0 avaliações