Identifying alterations in an input value with a color picker in Vue2

Using an external color picker component with vue2, it appears to work well initially but I am unable to detect changes to the input value within the vue component. Adding @change to the component instance does not trigger any events. Any suggestions for why this might be happening? It is worth noting that while the value changes the color hex value, it does not bind to the input.

The main issue is that item.color never changes... the new value from the input is assigned to the input value from the external script of the color picker but it doesn't update item.color (no binding) and cannot capture the new value.

I can't figure out how to catch them

I have tried using @change and @focus

<input
                    class="inp input_flexible"
                    :data-did="'A' + (index + 1) + '-colorPicker'"
                    name="color"
                    :id="'color_' + item.TIER_ID"
                    autocomplete="off"
                    type="text"
                    v-model="item.color"
                    v-on:input="cambiarcolor($event)"
                    @click="metodocolor(index, $event)"
                    @blur="metodoblur(index,$event)"
                    @change="cambiarcolor($event)"                   

                  />

https://i.sstatic.net/Sokp8.png

https://i.sstatic.net/pytTF.png

javascriptvue.jsdata-bindingcolor-picker

Answer №1

If you want to perform an action when the item.color (bound to v-model) changes, you can use the watch method in Vue.js.

new Vue({
  el: '#app',
  data() {
    return {
      item: {
        color: ""
      },
      doSomething: ""
    }
  },
  
  watch: {
    "item.color"(newValue) {
      this.doSomething = newValue;
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app>
  <input type="radio" value="#FFFFFF" v-model="item.color">
  <label>White</label>
  <br>
  <input type="radio" value="#000000" v-model="item.color">
  <label>Black</label>
  <br>
  <span> {{ doSomething }} </span>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Built-in Promises within MongoDB

Is there a way to determine which methods in mongoDb have an inbuilt promise? For example, "updateOne() , findOne()" have inbuilt promises that we can access using ".then", but many other mongoDB methods lack this feature. How can we identify which methods ...

javascriptnode.jsmongodbexpressmongodb-query

The React onChange event fails to trigger

Why isn't the onChange event firing in the input tag? I used LinkedStateMixin to track the input value before, but now I want to add an onChange event to run a function. After removing LinkedStateMixin, the onChange event still doesn't fire. I ev ...

javascriptreactjs-flux

Guide to using get() and res.sendFile() function to redirect webpages

Why is the page not redirecting properly? In my index.html file, I have this script: $.get( "/loginPage", function( data ) {}); The purpose of this script is to check if a user is logged in. If they are, it should redirect them to the lobbyPage. This is ...

javascriptnode.jsexpress

Choose options with selectize.js including option separators

My list of countries includes options with dashes as separators, but when I use selectize they disappear. How can I visually separate items in the list without using labelled option groups? <select class="form-control" id="Country" name="Country"> ...

javascriptselectize.js

Guide on incorporating JSON information into an HTML table

Currently, I am retrieving data that needs to be added to an HTML table once it is received. I have attempted some methods, but I am unable to dynamically add the data after the page has loaded. I aim to accomplish this using either JavaScript or jQuery. ...

javascripthtmljsondomaddeventlistener

Selecting radio button does not update corresponding label

I am having an issue with setting a radio button as checked. In the example snippet, it works perfectly fine but on my localhost, it is not working. Even though the input gets checked, the label does not change. Surprisingly, if I set another radio button ...

javascriptjqueryhtmlcssradio-button

Troubleshooting `<select>` and `<input>` components using Bootstrap and React

I am currently facing some challenges with implementing a <select> in my react project. Despite searching through various resources and attempting different solutions, I am still encountering bugs that are difficult to pinpoint. Below is the code sn ...

javascriptreactjsreduxbootstrap-4

How to send the file path to an API in JavaScript to convert it

I am currently working on a web application that allows users to upload a wav file and convert it to mp3 format. I have successfully implemented the wav to mp3 conversion and saving it to the project folder. However, I am facing an issue with dynamically p ...

javascriptc#html

Any ideas on how to fix the error that pops up during the installation of the bootstrap package in Node

The npm command is not recognized as a valid cmdlet, function, script file, or operable program. Please double check the spelling of the command and ensure that the path is correct before trying again. This error occurred at line 1. npm i bootstrap + ...

javascriptcssnode.jsjsontwitter-bootstrap

What is the best way to sort through custom components within children in Solid JS?

I have been working on developing a scene switcher for my personal application, and I thought of creating a custom component called SceneSwitcher. Inside this component, I plan to add various scenes that can be rendered. Here's an example: <SceneSw ...

javascripttypescriptjsxtsxsolid-js

Using ThreeJS to Load a Texture from an ArrayBuffer in JavaScript

If I have a JavaScript ArrayBuffer containing binary image data along with the image extension (such as jpg, png, etc), I want to create a ThreeJS Texture without the need for an HTTP request or file load as I already have the binary information. For exam ...

javascriptthree.jstextures

Angular Kendo dropdownlist and input textbox are not working together as anticipated

I'm looking to implement a dropdown list similar to Google search using Kendo Angular. However, I've encountered an issue where entering text in the textbox and pressing "Enter" passes the first matching value from the dropdown list to my compone ...

javascriptangulartelerikkendo-ui-angular2kendo-dropdown

Tips for inserting text to the left rather than the right using Jquery

I recently came across this code snippet shared by some helpful users on stackoverflow and it has been working perfectly for me. However, I do have a couple of queries regarding its functionality. Firstly, how can I ensure that the current selected option ...

javascriptjquery

Once the submission is made, the website will automatically refresh

As I delved into working on a web page utilizing JavaScript, I implemented a jQuery function to validate user input data. I ensured that if the data was incorrect, the function would return false (return false;) and the form would not refresh the page. How ...

javascriptjqueryajaxforms

I am attempting to create a footer with a set size, but encountering an issue

I'm in the process of developing a responsive website using Vue.js. One aspect I am working on is the footer container, which looks fine on the full screen but shrinks when the screen resolution is reduced below 1100 pixels. As shown in the images li ...

htmlcssvue.jswebfrontend

Unable to submit CSV file for Controller Action

I am encountering an issue with uploading a csv file to my backend action method. I have an action method called UploadPropertyCSV in Controller PropertyController that is supposed to process the file and add it to the database. However, when I click submi ...

javascriptjqueryjsonasp.net-mvccsv

How to retrieve the href attribute within an anchor tag using jQuery with a selector based on the div/span ID and the

Hello, I'm new to jQuery and I was hoping someone could help me with extracting the href attribute from an anchor tag using a div or span ID selector along with the anchor tag's class. <span id="view-post-btn"><a href="https://blog.comp ...

javascriptjquery

Easy Ways to Personalize the Appearance of Your Material-UI Tab Indicator

I've been working on customizing the tab indicator in material-ui and so far I've only been able to make rectangular or square shapes. I'm wondering if there's a way to turn it into an arrow or an upside-down triangle instead? Here is ...

javascriptreactjsmaterial-ui

Bring in d3 from unpkg

Uncertain of which file to import, I am seeking guidance on how to import d3 from unpkg.com. Can someone advise me on the equivalent unpkg version of: import * as d3 from "d3"; ...

javascriptes6-modulesunpkg

What are the steps to start up a NodeJS API using an Angular app.js file?

Currently, I am following various online tutorials to develop a web application using the MEAN stack and utilizing a RESTful API. I have encountered some challenges in integrating both the API server and Angular routes. In my project, I have a server.js f ...

javascriptangularjsnode.jsrestmean-stack