In my main component file, I added a color picker input in the navigation section to change the background color of the application. This works fine as the body tag can be accessed easily within the DOM.
Furthermore, I store the selected color in local storage so that it persists even after refreshing the page.
However, when attempting to add another color picker to modify the color of specific cards within a component or view, I encounter difficulty in targeting the relevant element.
<template>
<div id="app">
<nav>
...
<div class="color">
<input type="color" id="colorInputCards">
<font-awesome-icon input type="button" id="colorButtonCards" :icon="['fas', 'paintbrush']" @click="changeCardColor()" />
</div>
</nav>
<router-view/>
</div>
</template>
<script>
export default {
components: {},
methods:{
changeCardColor() {
let cardColor = document.getElementById("colorInputCards").value;
console.log(cardColor);
}
},
}
</script>
I have tried:
- Using
querySelector - Adding a
refattribute to the desired element and accessing it through
, but without success.this.$refs."refname".style.backgroundColor