Let's talk about the v-on parameter problem in Vue

Let's talk about the v-on parameter problem in Vue

Use of v-on:clock in Vue

I'm currently learning the vue.js framework. Make a note of any problems you encounter so you can refer to them later.

First, here is a page (for easier observation, each label is colored one by one):

The html code is:

<div class="groupbody">
   <ul class="list">
     <li v-for="cell in todo.groupbody " class="pagegroupcell " v-on:click="exchange($event)">
       <div class="pagecelltext">{{ cell.left }}</div>
       <div class="pagecellmin">{{ cell.min }}</div>
       <img src="img/images/direction/right.png" style="width: 20px;height: 30px;float: right;margin-top: 5px;">
       <div class="pagecellmsg">{{ cell.right }}</div> 
      </li>
    </ul>
    <div class="clear"></div>
</div>

js part of the code:

exchange: function (event) {
            alert("Start executing method");
            var a = event.target;
            var cellimg = a.getElementsByTagName("div")[0];
            var msg = cellimg.innerText; 
            page2datas.todos[0].groupheader = msg;
            alert("Method is executing"); 
            var b = document.getElementById("page1");
            b.style.display = "none";
            var c = document.getElementById("page2");
            c.style.display = "block";
            alert("Method execution ended");
          }

At this time, if you click the colored area in the cell (that is, when you click the text label of the li tag), only the first alert() method is executed, and the following two methods are not executed.

The reason is the event parameter of this method:

If there is a parameter $event in the tag binding method, you can use event.target to get the tag that is bound to the click event at the current point.

However, this parameter may also cause some problems. For example, if you want to execute the click event method completely regardless of which part of the li tag is clicked, the event parameter is not applicable. At this time, we can only think of other solutions.

Solution:

There is a v-for loop in li, which has a cell object, which contains the data in the li tag. You only need to pass this object to the click event method, and you can use this object to achieve the purpose you just wanted to achieve.

The modified html code:

<div class="groupbody">
   <ul class="list">
     <li v-for="cell in todo.groupbody " class="pagegroupcell " v-on:click="exchange(cell)">
       <div class="pagecelltext">{{ cell.left }}</div>
       <div class="pagecellmin">{{ cell.min }}</div>
       <img src="img/images/direction/right.png" style="width: 20px;height: 30px;float: right;margin-top: 5px;">
       <div class="pagecellmsg">{{ cell.right }}</div> 
      </li>
    </ul>
    <div class="clear"></div>
</div>

The modified js code:

 exchange: function (cell) {
        alert("Start executing method"); 
        page2datas.todos[0].groupheader =cell.left;
        alert("Executing");
        var b = document.getElementById("page1");
        b.style.display = "none";
        var c = document.getElementById("page2");
        c.style.display = "block";
        alert("Method execution ended");
      }

At this point, the entire electric shock event execution method can be fully executed, and subsequent page switching can also be completed.

Supplement: Parameter issues when binding click events to v-on in Vue

There are three cases regarding parameters when binding click events to v-on, as follows:

There are no parentheses after the bound method

 <button @click="btnClick">Click</button>
 <script>
 const app = new Vue({
  methods:{
  btnClick(event){
  // At this time, event is the object currently clicked console.log(event)
  }
  }
 })
 </script>

The bound method is followed by parentheses

<button @click="btnClick()">Click</button>
<script>
 const app = new Vue({
 methods:{
  btnClick(event){
  // At this time event is undefined
  console.log(event)
  }
 }
 })
</script>

The bound method has parentheses after it, and parameters need to be passed

<button @click="btnClick(123)">Click</button>
<script>
 const app = new Vue({
 methods:{
  btnClick(event){
  // At this time, event is 123
  console.log(event)
  }
 }
 })
</script>

The bound method has parentheses after it, and it needs to pass parameters and the currently clicked object.

<!-- In this case, if you need to pass the currently clicked object, the parameter must be $event -->
<!-- If you want to pass a number in the first position, you don't need to add quotation marks. If you want to pass a string, you must add quotation marks. If you don't add quotation marks, Vue will parse it as a variable. If it is not defined in data, an error will be reported. -->
<button @click="btnClick(123,$event)">Click</button>
<script>
 const app = new Vue({
 methods:{
  btnClick(num,event){
  // At this time, num is 123, event is the object currently clicked,
  console.log(num,event)
  }
 }
 })
</script>

The above is my personal experience. I hope it can give you a reference. I also hope that you will support 123WORDPRESS.COM. If there are any mistakes or incomplete considerations, please feel free to correct me.

You may also be interested in:
  • Steps to pass dynamic parameters in vue v-on:click
  • Detailed explanation of the basic usage of v-on event monitoring instructions in Vue
  • A brief discussion on the use of v-on event instructions in Vue.js

<<:  Use iptables and firewalld tools to manage Linux firewall connection rules

>>:  Problems encountered by MySQL nested transactions

Recommend

Record a slow query event caused by a misjudgment of the online MySQL optimizer

Preface: I received crazy slow query and request ...

In-depth understanding of the use of the infer keyword in typescript

Table of contents infer Case: Deepen your underst...

JavaScript to achieve the effect of tab bar switching

Tab bar: Click different tabs to display differen...

js to achieve the effect of dragging the slider

This article shares the specific code of how to d...

Solution to multiple 302 responses in nginx proxy (nginx Follow 302)

Proxying multiple 302s with proxy_intercept_error...

Sample code for a simple seamless scrolling carousel implemented with native Js

There are many loopholes in the simple seamless s...

Front-end state management (Part 2)

Table of contents 1. Redux 1.1. Store (librarian)...

JS Difficulties Synchronous and Asynchronous and Scope and Closure and Detailed Explanation of Prototype and Prototype Chain

Table of contents JS Three Mountains Synchronous ...

Detailed explanation of the abbreviation of state in react

Preface What is state We all say that React is a ...

Native js to realize bouncing ball

On a whim, I wrote a case study of a small ball b...

How to configure Basic Auth login authentication in Nginx

Sometimes we build a file server through nginx, w...

How to use CocosCreator for sound processing in game development

Table of contents 1. Basics of audio playback in ...

Vue and react in detail

Table of contents 1. Panorama II. Background 1. R...

Detailed explanation of MySQL event modification events (ALTER EVENT), disabling events (DISABLE), enabling events (ENABLE), event renaming and database event migration operations

This article uses examples to describe the operat...

Details on overriding prototype methods in JavaScript instance objects

Table of contents In JavaScript , we can usually ...