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
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
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!