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
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
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!