Why does the 'v-if' directive not function properly when applied within the 'return' statement?

When using v-if="css_max_count[i] == true" everything works fine, but as soon as I add a return statement, the code stops working. Do you know why?

Here is the shortened version of the code:

<div class="ui form" v-for="(im, i) in sorted_listim"> 
    <div class="ui left pointing red basic label" v-if="css_max_count[i] == true">
        {{im.count_buy}}
    </div>

    <div @click="add_dar(i)" class="ui right small basic green button"><h3>+</h3>
    </div>

</div>


add_dar(i) {
    if (im.count_buy < count) {
        this.css_max_count[i] = true
        // return - ??????
    } else {
        this.css_max_count[i] = false
    }
}

Answer №1

When a return statement is added to the expression, it causes an error as it generates invalid javascript code.
Vue's v-if directive works by accepting an expression that is wrapped in a new Function object, which already includes its own return statement.

function checkExpression (exp: string, text: string, warn: Function, range?: Range) {
  try {
    new Function(`return ${exp}`)
  }
  ...
  ...

The main difference between the two is return css_max_count[i] == true compared to

return return css_max_count[i] == true
.

Introducing an additional return statement results in an invalid function and triggers an error. You would have noticed an error in your console indicating this issue, as it is flagged regardless of the environment.

Refer to the checkExpression in the vue error-detector for the original source code.

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

The Bootstrap modal fails to open

I am currently working on implementing a Navbar button that triggers a Bootstrap modal containing a form. While looking for resources, I stumbled upon a useful script at https://gist.github.com/havvg/3226804. I'm in the process of customizing it to su ...

Best method for creating HTML elements with jQuery

I've come across various styles and methods for creating elements in jQuery, each with its own unique approach. I am interested in discovering the most effective way to construct elements and whether a specific method stands out as superior for any pa ...

When the user hits the enter key, automatically submit a form without the need for

Is it possible to submit a form on enter using type="button"? Here are my input fields: <input type="text" id = "login-user" class="form-control log-input" placeholder="Username" required="required"> <input type="password" id="login-password" clas ...

What is the best approach for managing the Paste event (using Ctrl+v or mouse) in vue.js?

When content is pasted into a text area in my vue.js application, I would like to trigger a function. Which event should I use for this scenario? ...

Attempting to create a school project involving pizza, but encountering some technical difficulties

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>pizza ...

What is the process for making a custom Radio-Button and Checkbox div mandatory?

I stumbled upon a creative way to design custom and accessible Radio- and Checkbox-Buttons by using divs and the aria role="radio" recommended by W3C. Check out the solution here <div role="radiogroup" aria-labelledby="group_label_1" id="rg1"> & ...

express-session is failing to maintain persistence and refusing to transmit a cookie to the browser

I am currently developing a web application using the MERN stack (React, Node.js, Express, and MongoDB). I have integrated express-session in my Node.js project, but for some reason, I cannot see the connect.sid cookie in the browser. Additionally, it appe ...

The requested API endpoint for retrieving the name could not be found on the Express

Struggling to configure the restful API for my express app. Below is my app.js code: var express = require('express'), app = express(), bodyParser = require('body-parser'), methodOverride = require('method-override'); rout ...

Update the second mouse click functionality using jQuery

I currently have a jQuery function integrated into my WordPress portal that manages the functionality of the menu and the display of subcategories to ensure proper mobile optimization. This code, which was created by the theme editor, handles these aspects ...

How can the background color of a DIV be altered based on the values of an array's minimum

Basically, I am fetching values from an array using AJAX. The background color will change from green to red based on the "aht_value". Currently, the colors are displaying correctly because I hardcoded the values in the calculation below. However, I want t ...

Is it possible to condense the coding of a vast array of objects into a more concise format?

Currently working on a personal project in react.js and aiming to write cleaner code. Is there a way to condense this code into just two lines or something similar? I attempted to create objects of arrays like const apps= {app_name:['Maps',&apo ...

Vue JS - Issue with data reactivity not being maintained

Currently, I have implemented a pagination indicator that displays the number of results on each page. For instance, page 1 shows '1-5' and page 2 shows '6-10 out of 50 results', and so on. The logic for updating the results seems to b ...

Waiting for text change in Selenium elements: A comprehensive guide

One of my elements changes its status in text form based on a context menu that is associated with it. Here is the particular element: td id="A" name="status"> StatusStart </td> Under certain circumstances, this can transform into ...

Incorporating jquery.prettyPhoto results in the script being displayed on the webpage

When I relocate the following script: <script src="js/jquery.prettyPhoto.js"></script> To this location: <script type="text/javascript"> ... </script> The script starts displaying on the page starting from the bold section on ...

Sending information to a subpage through props using a query in the URL triggers a 431 Request Header Fields Too Large error

I have a page called campaigns, and I am facing an issue on the index page where I want to pass data to my dynamic page [campaignId].tsx. Although I can see the data on my dynamic page, the URL links are becoming too long, leading to an HTTP Status code 4 ...

Encountering an undefined variable in the .env file

Once the .env file was created in the main React folder REACT_APP_API_KEY=gzomlK5CKLiaIWS.... I also installed the .env NPM library Despite this, I continued to receive undefined in the API file. What could be causing this issue? import React, { useState ...

The DiscordBot is configured to send a personalized direct message to users who have chosen a specific role

Having trouble setting up my bot to send a DM to new members who choose the Advertising role, and I can't figure out why. I'm fairly new to this. const { Client, GatewayIntentBits } = require('discord.js'); const client = new Client({ ...

Comparison between Vue3 Composition Functions and importing functions from a module

Just finished going through the latest Composition API RFC (link). It covers various methods to reuse code across components, excluding the import from module method. Presumably because it focuses solely on VueJS and for comparison purposes. They provided ...

What are the implications of implementing Ajax without relying on jQuery?

At a stage where I require Ajax on my webpage, but only for a specific section - checking if a username is present in the database. As detailed here, Ajax can be implemented using just JavaScript. What are the advantages and disadvantages of opting for t ...

Converting a String into a JSON Array

I currently have an array of JSON plots saved in MySQL. However, when I retrieve this information from the database, it is returned as a single long string. How can I convert this back into an array of JSON objects using JavaScript? My setup involves NodeJ ...