"Troubleshooting the issue with the @click event failing to update the data

Working in Vue.js, my v-for loop is set up to go through a list and generate buttons. Each button has a click event that should change the value of upUrl to its index:

    <div class="mt-3" v-for="(buttonPic, index) in buttonPics"
                      :key="buttonPic"           
    >
    <button class="btn btn-sm btn-success"
    @click="upUrl= index">
   {{ buttonPic }} </button>
    </div>

In the data() section, I have upUrl:null. However, upon checking in the Vue Google Chrome Console, I noticed that upUrl never gets updated and remains as null.

I attempted using 

@click="upUrl= this.index">
but encountered an error message stating: 'index' is defined but never used'.

javascriptvue.jsvuejs2vue-component

Answer №1

If you want to see if it works, take a look at this example:

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',

  data() {
    return {
      upUrl: null,
      buttonPics: ["pic1", "pic2", "pic3"]

    }
  },
  watch: {
    upUrl(newVal, oldVal) {
      console.log(newVal, oldVal)
    }
  }

})
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>


<div id="app" class="container">

  <div class="mt-3" v-for="(buttonPic, index) in buttonPics" :key="buttonPic">
    <button class="btn btn-sm btn-success" @click="upUrl= index">
   {{ buttonPic }} </button>
  </div>


</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

Display a webpage containing error messages and user input that can be sent back to the AJAX request

My form collects user information such as name, surname, etc. Here is an example of one input field: <div class="form-group"> <label for="name">Name</label> <input type="text" class="form-control" id="name" name="name" value= ...

javascriptjqueryajaxlaravellaravel-blade

Ways to stop a form input value from disappearing when clicking on other fields?

Upon loading the page, the form's campaignid input value is automatically filled. However, clicking on other fields causes it to reset to default. Is there a way to prevent this default behavior and preserve the input value of campaignid? I've ...

javascriptreactjsnext.jsformikchakra-ui

jquery line break in textarea

There is a 'edit description' button that, when clicked, makes text disappear and reappear if (id == 'commedit') jQuery(this).html('<textarea>'+jQuery(this).text()+'</textarea>'); else i ...

javascriptjqueryjquery-ui

Troubleshooting Angular JS loading problems

I'm attempting to implement the Angular-Spinner in my project: Specifically, I want to use it with http.get calls. This is what I have so far: Within controllers: $scope.loading = true; $http.get('js/data/test.json').success(function(resu ...

javascripthtmlangularjs

The information transmitted from the Laravel controller is not syncing with the Vue variable as expected

I've been working on a web app with a dashboard using Laravel and Vue. While passing data from the controller to the Vue file, the data is received correctly. However, when I try to set it to a Vue variable, the value does not update in the variable. ...

phplaravelvue.jsaxios

Firefoxx effortlessly glides divs across the screen as if they were images

Below is the HTML, CSS, and JavaScript code all in one document for testing: <style type="text/css"> #slider_container { width: 200px; height: 30px; background-color: red; display:block; } #slider { width: 20px; height: 30px ...

javascriptjqueryfirefoxevents

What is the most effective way to transmit a conditional operator via a TypeScript boolean field?

Currently, as part of my transition to typescript, I am working on incorporating a conditional operator into the table component provided by Ant Design. const paginationLogic = props.data.length <= 10 ? false : true return ( <> ...

javascriptreactjstypescriptbooleanconditional-operator

I am facing a recurring issue where I am unable to add new libraries to my node_modules directory due to encountering the same error every time I attempt to

An error occurred after running npm audit --force, causing a dependency issue in my Node_modules 0 verbose cli C:\Program Files\nodejs\node.exe C:\Users\Jenis\AppData\Roaming\npm\node_modules\npm\bin& ...

javascriptnode.jsreact-nativenpmnode-modules

What is the reason for Vue.js failing to refresh the DOM when utilizing the datepicker feature with Moment.js

Currently, I am working on a basic datepicker control in vue.js, utilizing moment.js for managing the date formatting and manipulation. The issue that I'm encountering is that despite modifying the date instance within the component upon clicking eit ...

javascriptvue.js

Is there a way to have the span update even if the input stays the same? Currently, it only changes when the input is different

Retrieve results of 3 lines (Ps) by entering a word in the text area and clicking search. If the word is found after clicking the button, a span will be displayed with the count of occurrences as well as the highlighted P(s) where it was found. If the wo ...

javascripthtmlcss

Having trouble with my ASP.Net OnClick Subs not functioning as desired

I have implemented onClick handlers to process button clicks that query SQL. The issue I am facing is that these queries sometimes take between 10 to 30 seconds to return a response. To prevent click-stacking during this time, I disabled the buttons. Howev ...

javascriptasp.netajaxvb.net

Rotating 3D cube with CSS, adjusting height during transition

I'm attempting to create a basic 2-sided cube rotation. Following the rotation, my goal is to click on one of the sides and have its height increase. However, I've run into an issue where the transition occurs from the middle instead of from the ...

javascriptjquerycss

Is there a way to grab code from a different HTML page using JavaScript and jQuery when the user clicks on something?

After testing various codes for the intended purpose mentioned in the title, I have observed a peculiar behavior. The code from settings.html appears briefly and then disappears rapidly. Javascript: function load() { $("#paste").load("settings.html") ...

javascriptjqueryhtml

Vue.js - Maintaining input value when model declines updates

I am working on a text input that allows users to enter numbers with a maximum of three digits after the decimal point: <v-text-field type="text" :value="num" @change="changeNum($event)" /> <p>{{ num }}</p> ... export default { data: ...

javascriptvue.jsvuejs2vue-componentvuetify.js

Click on the login button once the field has reached its maximum length

I need assistance with a login form that has a maximum length of 4 characters for both empNum and ssn. Below is the code snippet: <input type="text" id="empNo" name="empNo" style="width: 90px; margin-left: 10px" maxlength="4" onkeyup="nextField(this, & ...

javascriptjqueryjquery-ui

Internet Explorer freezing when running selenium executeScript

Hey everyone, I've spent the past couple of days scouring the internet trying to find a solution to my modal dialog problem. There's a wealth of helpful information out there and everything works perfectly fine except for Internet Explorer. Speci ...

javajavascriptinternet-explorerseleniumwebdriver

Is jquery.validate showing errors more than once?

For my testing program, I utilize the jquery.validate plugin to validate user input fields. Here is how it's set up: <script src="js/jquery-1.12.4.min.js"></script> <script src="js/jquery-form-3.51.min.js"></script> <script ...

javascriptjqueryajaxjquery-validatejquery-forms-plugin

Having trouble with React JS BrowserRouter not routing correctly when used with Express JS and Nginx proxy

I am facing an issue where I need to send parameters to a React component through the URL. This works perfectly fine when I test it in my localhost development environment. However, the problem arises when I deploy the React app to my live server (). The ...

javascriptnode.jsreactjsexpressnginx

Can a rotation animation be incorporated into an image in next.js when it is clicked?

Looking to enhance a next.js image with an animation? How about making it rotate 360 degrees upon each click? Despite my attempts at toggling classes, I can't seem to achieve the desired outcome. Any guidance would be greatly appreciated. Thank you in ...

javascriptcssimageanimationnext.js

In the production mode, Webpack doesn't compile any code

I recently followed the typescript guide at https://webpack.js.org/guides/typescript/ After running webpack in "production" mode, I noticed that it emitted very minimal output. Below is the code from my src/index.ts file: export function foo() { return ...

javascripttypescriptwebpackwebpack-5