Is it possible to have a complex V-If statement within a computed property?

Struggling to manage a complex v-if statement within the template as it's becoming overwhelming.

After moving the statement into a computed property, an error occurs during evaluation. Any suggestions? 

<div v-for="offer in offers" class="grid-4 item hotel hotel-item" v-if="showOffer"> 
<!-- OFFER CONTENT HERE --> 
</div>


computed: {
  showOffer() {
    return (offer.island === filters.islandFilter || filters.islandFilter === 'All') &&
      (offer.starrating === filters.starRating || filters.starRating === 'All') &&
      (offer.board === filters.boardBasis || filters.boardBasis === 'All') &&
      (offer.duration === filters.duration || filters.duration === 'All') &&
      (offer.price.from < filters.price)
  }
}

Attempting to filter and display offers that meet the V-if conditions.

javascriptvue.jsvuejs2vue-component

Answer №1

Consider using a method instead of a computed property by passing the offer as a parameter like so:

  <div v-for="offer in offers" class="grid-4 item hotel hotel-item" v-if="showOffer(offer)"> 
      <!-- OFFER CONTENT HERE --> 
  </div>

methods: {

  showOffer(offer) {
    return (offer.island === filters.islandFilter || filters.islandFilter === 'All') &&
      (offer.starrating === filters.starRating || filters.starRating === 'All') &&
      (offer.board === filters.boardBasis || filters.boardBasis === 'All') &&
      (offer.duration === filters.duration || filters.duration === 'All') && (offer.price.from < filters.price)

  }

}

It is also recommended to use another approach with a computed property that returns an array filtering your offers based on specified conditions and removing the v-if directive:

computed: {
  comp_offers() {
    return this.offers.filter((offer) => {

      return (offer.island === filters.islandFilter || filters.islandFilter === 'All') &&
        (offer.starrating === filters.starRating || filters.starRating === 'All') &&
        (offer.board === filters.boardBasis || filters.boardBasis === 'All') &&
        (offer.duration === filters.duration || filters.duration === 'All') && (offer.price.from < filters.price)

    })
  }

}
<div v-for="offer in comp_offers" class="grid-4 item hotel hotel-item">
  <!-- OFFER CONTENT HERE -->
</div>

Answer №2

Initially :

  • When you are coding within the <script> tag, remember to prepend this before the variable you wish to access from your vue data. Instead of using filters.islandFilter, utilize this.filters.islandFilter. The former syntax is for accessing filters from the template, not inside the script tag.
  • In your computed property, you are attempting to reference offer, but the method does not recognize what offer is. Consider using a method like showOffer(offer) instead. Alternatively, opt for filters on your data for better practice (refer to following paragraph).

Subsequently :

The combination of v-for and v-if statements might be problematic in most scenarios. If you intend to display only specific offers, it's advisable to create a computed property that returns the filtered list of offers, and then apply v-for on that new list.

For instance, in your template :

<div v-for="offer in filteredOffers" class="grid-4 item hotel hotel-item"> 
      <!-- OFFER CONTENT HERE --> 
</div>

In your script section:

  data: {
    offers: [
       //list of offers
    ]
  },
  computed: {
    filteredOffers () {
      return this.offers.filter(offer => {
        return (offer.island === this.filters.islandFilter || this.filters.islandFilter === 'All') &&
          (offer.starrating === this.filters.starRating || this.filters.starRating === 'All') &&
          (offer.board === this.filters.boardBasis || this.filters.boardBasis === 'All') &&
          (offer.duration === this.filters.duration || this.filters.duration === 'All') &&
          (offer.price.from < this.filters.price)
      })
    }
  }

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

Can an additional height be added to the equalizer to increase its height?

Is it feasible to append an additional 35px to the height determined by Foundation Equalizer? For instance, if Equalizer computes a height of 350px, I would like to increase it by 35px. This means that the resultant style should be height: 385px; instead ...

javascriptjqueryzurb-foundation

Guide to utilizing vue-twemoji-picker in TypeScript programming?

Has anyone encountered this issue when trying to use vue-twemoji-picker in a Vue + TypeScript project? I keep receiving the following error message. How can I fix this? 7:31 Could not find a declaration file for module '@kevinfaguiar/vue-twemoji-picke ...

typescriptvue.js

"Implementing JavaScript Validation for Textboxes: A Step-by-Step Guide

I need some help with restricting the input of a textbox within a gridview to only 'X' or 'O'. I am not very familiar with javascript, so any guidance on how to accomplish this would be greatly appreciated. It's worth noting that t ...

javascriptjqueryasp.netvb.net

The jQuery click event does not fire within a bootstrap carousel

I am trying to set up a bootstrap carousel where clicking on an image inside it will trigger a self-made lightbox. However, I am facing some issues with the JavaScript code not being triggered with the following syntax: $('html').on("click", ".l ...

javascriptjqueryhtmltwitter-bootstrap

Add empty objects to an array using a push function following the Vue JS constructor function

During my learning journey with Vue JS, I encountered an issue while attempting to populate an array with objects using a constructor function and the push method. Surprisingly, in Vue JS, the push function inserts a blank object into the array instead of ...

javascriptvue.jsvuejs2

Change the term to its corresponding translation

I have developed an Ionic Multilingual App that includes a select feature. Within this select, choosing a specific option disables certain page elements. However, I am facing an issue where one of the elements needs to change its text based on the selected ...

javascriptangularjsionic-frameworkangular-translate

Is there a way to use jQuery to zoom in and out a specific area of the screen as the mouse moves?

I need help with implementing a zoom in effect for my images. I have two 'Div's stacked on top of each other, each containing a canvas with draggable and droppable images. I want the images to zoom in when the mouse hovers over them and zoom out ...

javascriptphpjquery

The webpage becomes unresponsive and crashes within a matter of minutes

When my website is hosted on a server, it becomes unresponsive, freezes, and crashes after a few minutes. However, everything works fine when I run it locally on localhost while pulling API data from a Flask Server app. The Flask-based API engine retrieve ...

javascriptajaxflask

Can you explain the distinctions among “assert”, “expect”, and “should” in the Chai framework?

Can you explain the variations between assert, expect, and should? How do you know when to utilize each one? assert.equal(3, '3', '== turns values into strings'); var foo = 'bar'; expect(foo).to.equal('bar' ...

javascriptmocha.jschai

Utilizing jspm for installing npm packages along with their dependencies

When using jspm, I can easily install npm packages by running: jspm install npm:<pkg-name>. This allows me to use the package in development, like so: import myPackage from 'myPackage';. If the package.json file of the npm package includes ...

javascriptnpmjspm

`Should I bother converting an array to a set for searching in NodeJS?`

I'm curious to find out if converting an array into a set is worth it for faster searching in NodeJS. In my scenario, the search operation is performed frequently, but not on large datasets (usually up to ~2000 items in the array). The goal is to lo ...

javascriptarraysnode.jsoptimizationset

Make sure to attach a resize event handler just once

I am working with a widget that inserts a div element into the DOM. This div requires some JavaScript to handle the resize event effectively. Here's the issue: The widget may be added multiple times on the same page, but I want to avoid adding re ...

javascriptjqueryresizewindow-resize

The code is running just fine when tested locally, but it seems to encounter an issue when accessed remotely, yielding

Currently, I am in the process of developing a dual twin setup using a Raspberry Pi. The goal is to simulate a continuous transmission of body temperature data, which is then sent to a server that stores the information in a MongoDB database. Everything fu ...

javascriptnode.jsjsonmongodbraspberry-pi

Learn the process of sending multiple values to a CodeIgniter controller using Ajax

function fetchData(a, b) { let xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState == 4) { document.getElementById("message").innerHTML = xhr.responseText; } }; xhr.open("GET", ...

javascriptphpjqueryajaxcodeigniter

Utilizing PHP and Ajax to showcase individual row details within a while loop upon clicking a hyperlink

In the midst of a new project, I find myself faced with a task where the user can log in and view their personal delivery orders. The list of deliveries is generated using a while loop. However, whenever I click on the details button for an item in the lis ...

javascriptphpjquerymysqlajax

Issue with jquery's .load() and getScript functions

Earlier today, I encountered an issue with a .load() function being called in a script. I managed to solve the problem using .getScript(), but now I'm facing a major issue - the function is being executed multiple times. You can find the full code a ...

javascriptjqueryajaxload

Attaching an event handler to $(document) within an Angular directive

One of the challenges I am facing is creating a directive that functions like a select box. When this select box is open and I click outside of it (anywhere else on the document), I want it to collapse. Although this JQuery code works within my directive, ...

javascriptjqueryangularjsdocument

What is the method for sending a file using JavaScript?

var photo = 'http://cs323230.vk.me/u172317140/d_5828c26f.jpg'; var upload_url = 'http://cs9458.vk.com/upload.php?act=do_add&mid=62..'; var xmlhttp = getXmlHttp(); var params = 'photo=' + encodeURIComponent(photo); xmlhttp ...

javascriptajaxfile-upload

Error: Attempting to access the `isPaused` property of a null object is not possible

For my Vue front-end app, I'm attempting to integrate wavesurfer.js. However, upon receiving the audio file link from the backend, I encounter the following error: wavesurfer.js?8896:5179 Uncaught (in promise) TypeError: Cannot read property 'isP ...

javascriptvue.jswavesurfer.js

Changing the CSS class of the Bootstrap datetime picker when selecting the year

Is there a way to change the CSS style of the Bootstrap datetime picker control so that when selecting years, the color changes from blue to red? I attempted to do this with the following code: .selectYear { background-color:red!important; } However ...

javascripthtmlcsstwitter-bootstrap