My current situation is as follows:
https://plnkr.co/edit/LdbVJCuy3oojfyOa2MS7
https://i.sstatic.net/ivWnE.png
I am looking to activate the "Press me" buttons when the input changes.
At this point, I have a code snippet that can detect when the input has changed:
enableButton:function(dino) {
console.log("input changed", dino);
}
However, I am unsure about the necessary code within the enableButton function in order to enable the corresponding button.
How should I approach this?
I adjusted your Page in such a way that the :disabled only verifies if the current Input differs from the previous Value, however this approach does not update the original Dino value. If you wish to have it updated, please let me know so I can make further modifications to my solution.
To keep track of the disabled state of all dinosaurs, you can create a new property:
data() {
disabled: {
Triceratops: true,
Velociraptor: true,
Tyrannosaurus: true,
},
}
Next, connect the button's disabled attribute to this property:
<button :disabled="disabled[dino]">Click me</button>
In the method enableButton(dino), you can remove the disabled state for the specified dinosaur:
enableButton(dino) {
this.disabled[dino] = false;
}
new Vue({
el: '#app',
data: () => ({
dinos: [
"Triceratops", "Velociraptor", "Tyrannosaurus"
],
disabled: {
Triceratops: true,
Velociraptor: true,
Tyrannosaurus: true,
},
}),
methods: {
enableButton(dino) {
this.disabled[dino] = false;
},
onClick(dino) {
alert(dino)
}
}
});button:disabled {
color: gray;
}<script src="https://unpkg.com/vue"></script>
<div id="app">
<template v-for="dino in dinos">
<div>
<input type="text" :value="dino" @input="enableButton(dino)">
<button @click="onClick(dino)" :disabled="disabled[dino]">Click me</button>
</div>
</template>
</div>I've been attempting to make an ajax request, but it keeps returning with an error response. $('form#contactForm button.submit').click(function () { var contactName = $('#contactForm #contactName').val(); ...
I've decided to keep the live xml/atom-feed URL private, as it's hosted on LiveJournal. However, I'm a bit confused about how this all works: let XML_URL = "https://users.livejournal.com/<username>/data/atom"; $(function(){ ...
I am looking to apply Bootstrap CSS only to routes starting with '/admin'. I have enabled lazy loading for both admin and public modules. ...
Can modern browsers suppress errors in HTML, CSS, and JS sources? Is there a method to uncover all mistakes, no matter how small they may be? ...
I am interested in developing an application with Spring Boot that allows users to make video calls and share text messages. I also want the ability to save these videos for future viewing by registered users of the app. Although I am familiar with node.j ...
Stack Overflow utilizes a URL structure of stackoverflow.com/questions/{question ID}/{question title}. If you happen to misspell the {question title}, you will be redirected permanently with a 301 status code to the correct URL, provided that you have the ...
For a small site I developed, I utilized Gatsby for static content. However, for certain dynamically rendered content, I opted to employ client-only routes in Gatsby. Although I implemented a Header, Footer, and a specific font on my static site, these sa ...
I'm a beginner when it comes to using angularjs HTML File: <div class='col-md-2 searchdisplay-col1' ng-controller="amenitiesController" style="margin-top:20px"> <h4>Amenities</h4> <label ng-repeat="facilityName ...
I've been facing an issue with my code structure, particularly with the duplication of header script imports in multiple places. Every time I need to add a new script, I find myself manually inserting <script type="text/javascript" src=&q ...
Utilizing leaflet maps, I have implemented a functionality where clicking on the map opens a popup at a specified location and centers on that position. The code for this is as follows: var popup = L.popup(); function onMapClick(e) { popup . ...
I am attempting to change the multiselect label of selected items and replace it with a static default label. Here is what it currently shows: This is what I have tried: .p-multiselect-label { visibility: collapse; overflow: hidden; white ...
Is there a way to dynamically add key-value pairs to the initial state of an empty object in functional components, similar to computed property names in class components? I currently have an initial state of {}. const [choice, setChoice] = useState({}) ...
Currently experimenting with this code snippet: var CustomTable = function($elem) { this.properties.element = $elem; this.initialize(); }; CustomTable.prototype.PROPERTIE = { secondElement: $('.second') // this element ...
I have a basic webpage where I want the text to display from a link. Here is my website: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Encyclopedia</title> <link href="test.css" re ...
In the header.html file, I have the following angular code: <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> &l ...
Can someone assist me in creating a calendar feature for my app? My concept involves a button with text that, when clicked by the user, opens a calendar. However, I am encountering an error message: ERROR Error: Uncaught (in promise): TypeError: Cannot set ...
While I was reading through the jQuery source code, I came across this interesting line: jQuery(this)[ state ? "show" : "hide" ](); Is there any particular benefit to using this syntax over the more traditional approach shown below? state ? jQuery(this) ...
I am facing an issue where the beep sound trigger upon receiving an API response works perfectly in Chrome and Firefox browsers, but unfortunately, it does not work in Internet Explorer. if ($scope.totalQueueList) { var audio = new Audio(); audio.s ...
After a user clicks the login button in my navigation, a modal box pops up. However, once the user logs in, the modal box does not disappear. How can I hide or remove the modal box when users click on the login button? This code snippet is from Home.vue: ...
Can anyone recommend a JavaScript live chart/graph library that can create clockwise graphs with multiple points, similar to the example below? https://i.sstatic.net/dQfK4.png ...