What is the best way to choose a tag from an app within components or views?

Question

What is the best way to choose a tag from an app within components or views?

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 ref attribute to the desired element and accessing it through
```
this.$refs."refname".style.backgroundColor
```
, but without success.

javascript vue.js

Answer 1

Answer №1

To implement two-way data binding and a watcher in Vue, you can use v-model and follow this example: (live example)

<script>
export default {
    data () {
      return {
        colorInput: undefined
      }
    },
    watch: {
      colorInput(color) {
        document.body.style.backgroundColor = color
        localStorage.setItem("background", color)
      },
    },
    created() {
      this.colorInput = localStorage.getItem("background")
    }
}
</script>

<template>
  <input type="color" v-model="colorInput">
</template>

Answer 2

To implement two-way data binding and a watcher in Vue, you can use v-model and follow this example: (live example)

<script>
export default {
    data () {
      return {
        colorInput: undefined
      }
    },
    watch: {
      colorInput(color) {
        document.body.style.backgroundColor = color
        localStorage.setItem("background", color)
      },
    },
    created() {
      this.colorInput = localStorage.getItem("background")
    }
}
</script>

<template>
  <input type="color" v-model="colorInput">
</template>

What is the best way to choose a tag from an app within components or views?

Answer №1

Similar questions

Uncovering unseen tags generated by JavaScript on a webpage using Python

Ldap.js: exploring nested searches

The feature to hide columns in Vue-tables-2 seems to be malfunctioning

The v-model in the Vue data() object input is not functioning properly and requires a page refresh to work correctly

Navigating with NextJS to a personalized URL and managing the feedback from an external application

Use jQuery to detect the presence of the class .class, and if it exists, automatically append the same class to a specific #id element on a particular webpage

How to access Bootstrap's modal initial data-* upon closing

Elevate javascript

Utilize Launchdarkly in React by incorporating it through a custom function instead of enclosing it within

Retrieve the highest integer from the server-side for the client

Is there a way to validate form elements in HTML prior to submitting the form?

How can I turn off shadows for every component?

Encountering an issue when running the command "ng new my-app" after updating the @angular/cli package

Can you explain how to convert a 32-bit floating point number from a Buffer to a JSON string in NodeJS while maintaining the original precision?

Sort div elements based on checkbox filters

When the forward button is pressed multiple times in the carousel, the alignment changes

Construct a structure containing the key/value pairs of cells within an HTML table row using JavaScript

Attempting to transfer a Vue component from one component to another, without directly involving the App.vue file

How can I efficiently update child states within a parent class using ReactJS?

Can angular $q.all() achieve the same level of success as jQuery $.get()?