Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Adicionando Propriedades Dinamicamente em Vue.JS

Bom dia,

Estou precisando percorrer os inputs de uma tela por uma class que tem em inputs especifico em Vue.js e adicionar a propriedade readonly nesses inputs dinamicamente? Teria como fazer isso?

Obrigado

4 respostas
solução!

Esse parece um comportamento para ser usado com a "Methods" . Assim ela vai executar normalmente.

Você pode buscar estes inputs pelas classes usando dentro da função o

function(){
  document.querySelector(".sua-classe").setAttribute('readonly')
}

Se você tiver uma lista, você pode buscar com o querySelector e executar um mapeamento neles com o mapemaento de array .map

function(){
  let inputs = document.querySelector(".sua-classe") // isto vai te entregar um array com todos os elementos com a mesma classe

  inputs.map(element, index){ // isso vai fazer um laço de repetição dentro dos seus iputs
    if(el.classList == "sua-classe-de-confirmacao-do-elemento"){ //isso vai confirmar se lá tem o que você procura
        el.setAttribute('readonly') // Isso vai colocar a propriedade dentro do seu elemento
   }
  }
}

// JQUERY FREE

Se essa não for a sua dúvida, tenta mandar o código que você está usando e especificar um pouquinho mais a situação que te ajudamos

Bom dia Allan

O seu código não deu certo mas usei como base, como precisou manipular isso direto no DOM não tive jeito tive que fazer isso mesmo

document.querySelectorAll(".classe").forEach(function(input) {
    input.setAttribute('readonly', true)
});

Obrigado!

Nesse tipo de situação a gente não tem muito o que fazer além de percorrer o dom todo mesmo. Mas se você perceber que isso vai ser frequente, pode fazer uma função mais genética pra atender vários casos e você só importa ela no template que for usar ou deixa ela declarada no escopo global

function setProperty( ElementClass, OptionToSet, OnOff ){
    document.querySelectorAll( ElementClass ).forEach(function(input) {
            input.setAttribute( OptionToSet , OnOff)

    })
}

E pode chamar essa função no código assim:

setProperty(".classe", "readonly", true)

De qualquer maneira, precisando estamos aqui pra ajudar :)

Não tinha pensado dessa forma Allan, desse jeito fica melhor ainda. Obrigado!