Estoy seguro de que esto es un error simple, pero he estado más de una hora tratando de encontrar dónde está el problema y definitivamente podría usar un punto de vista diferente.

En la siguiente función cambio el estilo de dos botones. Uno de ellos responde correctamente y, de hecho, su tamaño de fuente cambia cuando se llama a la función (deleteBtnToDecorate).


El otro, no entiendo por qué no responde y el tamaño de fuente no cambia (doneBtnToDecorate):

 changeStyle: function(idNumber){
        const liToDecorate = document.getElementById(`id${idNumber}`)
        const doneBtnToDecorate = document.getElementById(`idDone${idNumber}`)
        const deleteBtnToDecorate = document.getElementById(`idDelete${idNumber}`)
      
        liToDecorate.style.textDecoration = 'line-through'
        doneBtnToDecorate.style.fontSize = '0.8rem'
        deleteBtnToDecorate.style.fontSize = '1.1rem'
      }

Cosas que he probado:

  • consola iniciada haciendo clic en ambos botones para verificar que todos apuntado correctamente. Lo son

  • cambió el tamaño de fuente css manualmente para verificar en caso de que el bootstrap pudiera ser el problema (aunque si lo fuera, el otro botón no cambiar cualquiera) pero de todos modos ... el hecho es: Cambia con éxito cuando lo hago a través de CSS y no el DOM

Este es mi código completo:

 <ul class="item-list-ul">
        <li 
          v-for="(i, index) in items" 
          :id="`id${index}`" 
          :key="index">{{ i }}
          <div class="item-butons">
            <b-button :id="`idDone${index}`" class="done-btn" @click="changeStyle(index)" size="sm" variant="outline-dark">Hecho!</b-button>
            <b-button :id="`idDelete${index}`" class="delete-btn" @click="deleteItem(i)" size="sm"  variant="warning">Borrar</b-button>
          </div>
        </li>
      </ul>

  </div>
</template>

<script>
export default {
    name: 'TodoList',
    methods: {
      changeStyle: function(idNumber){
        const liToDecorate = document.getElementById(`id${idNumber}`)
        const doneBtnToDecorate = document.getElementById(`idDone${idNumber}`)
        const deleteBtnToDecorate = document.getElementById(`idDelete${idNumber}`)
      
        liToDecorate.style.textDecoration = 'line-through'
        doneBtnToDecorate.style.fontSize = '0.8rem'
        deleteBtnToDecorate.style.fontSize = '1.1rem'
      }
    }
  }
</script>

<style lang="css">
.item-wrapper{
    padding: 4vh 3vh 4vh 3vh;
}
.item-list-ul{
  margin-right: 4vh;
}
.item-list-ul li{
  margin-bottom: 3vh;
} 
.item-list-ul li{
  font-size: 1.4em !important;
  font-weight: 600;
  list-style: outside none none;
}
.done-btn{
  margin-right: 20px;
  font-size: 1rem !important;
  font-weight: 600 !important;
}
.delete-btn{
  font-size: 0.9rem;
  font-weight: 600 !important;
}


</style>
0
J. Cake 15 oct. 2019 a las 20:36

1 respuesta

La mejor respuesta

Tu CSS usa !important:

.done-btn {
  ...
  font-size: 1rem !important;
  ...
}

Si usa !important, tendrá prioridad sobre los estilos en línea.

Por cierto, esta no es realmente la forma correcta de hacer esto en Vue. Debe aplicar los cambios dentro de la plantilla a través de enlaces class o style en lugar de tomar elementos y cambiarlos directamente.

1
skirtle 15 oct. 2019 a las 17:46