Setting up computed properties in VueJSSetting up computed values in

I am currently working on developing a lottery number service, and I am curious about how to set up computed properties. I came across the Vue.js documentation for computed properties at https://v2.vuejs.org/v2/guide/computed.html#Computed-Properties. I tried to follow the guidelines provided in the documentation, but I seem to be making some mistakes.

<script async src="//jsfiddle.net/rhmyqswp/embed/"></script>


<section class="saved-lotto-numbers">
<div class="saved-lotto-number-box" v-if="savedNumbers.length">
    <ul class="saved-number-list">
        <li v-for=" (savedlottoNumber,index) in savedNumbers" class="saved-lotto-number">

            <span class="eachnumber">{{savedlottoNumber.numbers}}</span>
            <!-- <span class="eachnumber">{{ displayNumbers(savedlottoNumber.numbers)}}</span> -->

        </li>
    </ul>
</div>
</section>


 <!-- <span class="eachnumber"&g...

In this section, I am attempting to implement the computed method because I encountered an issue while trying to include an image. Due to restrictions, I have replaced the image URL.

https://scontent-icn1-1.xx.fbcdn.net/v/t31.0-0/p280x280/20231970_1418449444910830_4818341573312628187_o.jpg?oh=7457496ac48f6182ae4bca5e88370113&oe=5A105736)

After clicking the save button, it displayed 'this one []', prompting me to set up a computed property.

  computed: {
    displayNumbers: function(Numbers) {
        return Numbers;
    }
}

Initially, I expected to see the same result on the screen since I was only returning a value without any additional actions. However, I encountered a power error.

  https://scontent-icn1-1.xx.fbcdn.net/v/t1.0-9/20106562_1418455411576900_6516857588571883325_n.jpg?oh=612817d9a803303f42c9bb107993b919&oe=59C8C567
javascriptvue.jsvuejs2

Answer №1

If this is your scenario, it would be best to utilize the methods feature rather than using computed properties.

methods: {
  showValues(Values) {
      return Values
  }
}

Alternatively, you could consider using filters.

filters: {
  showValues(Values) {
    return Values
  }
}

In your template, include the following:

<span class="eachvalue" >{{ savedlottoValue.values | showValues }}</span>

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

Initiate the Material TextField onChange event from within a nested component

I am currently working on a component that looks like this: class IncrementField extends Component { inputRef; changeValue() { this.inputRef.value = parseInt(this.inputRef.value) + 1; } render() { const { ...other } = this.props; return ( ...

javascriptreactjsmaterial-ui

Having trouble retrieving object values from the request body during a POST request in [Node.js, MySQL]

I am currently developing a management system and working on creating POST requests for the API to add a new city to the database. However, I am facing an issue where instead of receiving the correct values from the request's body, I am getting "undef ...

javascriptmysqlnode.jsexpressrequest

Is there a way to uncheck a checkbox by clicking on a link?

Just have a single checkbox for toggling: <label><input type="checkbox" name="myfield" id="myfield" />&nbsp;&nbsp;Enable Sound</label> Users can click on it to turn sound on the site. I'm looking for a way to uncheck the ch ...

javascript

Having trouble retrieving req.session variables in Express/NodeJS?

I have come across various versions of this particular question, however, none of them seem to address my issue directly. My current objective is to establish a Node.js server using Express. Below is my existing server configuration: var express = require ...

javascriptnode.jssessionexpress

Troubleshooting VueJS: Issue with $router.push and passing query parameters

In my NuxtJS(v. 2.10.2) application, there is a URL structure that includes the post's id like this: /post?pid=5e4844e34202d6075e593062. The URL works fine and loads the post based on the value of the pid query parameter. However, when a user adds ...

vue.jsvue-routernuxt.jsquery-string

Determining if a user is in fullscreen mode within a Vue component: A step-by-step guide

I have a Vue component that I want to use to monitor when the user switches between fullscreen mode and windowed mode in their browser. Despite adding event listeners when the component is mounted, these events are not triggered when I attempt to enter or ...

vue.jsvuejs2event-handlingvue-componentfullscreenchange

Add a variable to the configuration

Here is my configuration setup angular.module('moduleApp.config') .config(['$translateProvider', '$languageSupportProvider', function($translateProvider, $languageSupportProvider) { // Need to access data from myS ...

javascriptangularjs

React Component: Issue with toggle functionality in child component not meeting expectations

I'm currently working on a checkbox user interface, where I need to pass a toggle function down to a list component. The issue I'm facing is that while I can check the checkbox successfully, I'm unable to uncheck it for some reason. Below i ...

javascriptreactjs

Code snippets to reduce excess white space on a website using HTML and CSS

On my website, there are multiple tabs, each containing content from an HTML file. When a user clicks on Tab1, boxes with images are displayed. The layout can be seen in the following Code Demo: Code Demo here There seems to be extra space before and afte ...

javascripthtmlcss

Tactics for postponing a js function post-click

I need to implement a delay after clicking a button to fetch some data. The code will be executed within the browser console. $(pages()) is used to retrieve the pagination buttons. let calls = []; for (let i = 1; i <= callPagesCount; i++) { ...

javascriptjquery

Angular 1.5 - Component for fetching HTML content with dynamic data

Help needed with using Angular Component method. Developing a main html file with its main controller containing a JSON list of client data: clients: [{ "name": "John Jackson", "age": "21", "hair": "brown", }, { "name": "Janet Doe", ...

javascripthtmlangularjsangularjs-components

Error: The 'path' value is undefined and cannot be searched for using the 'in' operator

Hey there, I'm currently trying to grasp the concept of vue-router. I've watched multiple tutorials but encountered an error that says 'Cannot use 'in' operator to search for 'path' in undefined,' and the router-link ...

vue.jslaravel-9

Issue with JQuery UI Tabs not displaying additional HTML pages in JavaScript

One issue I'm facing is that I added Tabs from JQuery UI on my website. The tab containing paragraphs loads fine, but the tabs linked to other HTML pages (which don't have tabs) won't load. Here is my .js file code and .html code: $(funct ...

javascriptjqueryjquery-ui

Hide button for the last input form to dynamically remove in jQuery

At first, I hide the remove button when there is only one form. However, if there are multiple forms and the user deletes all of them, I want the last form to remain visible and not be deleted. Can someone assist with this issue? Here is my code: <! ...

javascriptjqueryhtml

"Enhancing User Experience with jQuery: Implementing a Smooth Scroll Feature with Current

I could really use some guidance on this issue that's been causing me trouble. Take a look at this fiddle for reference: http://jsfiddle.net/NtUpw/ Currently, the code is functioning as expected. However, I'm facing an issue where when the curre ...

javascriptjquery

Looking for guidance on configuring an email composer in a PhoneGap application

Seeking assistance in troubleshooting the email composer plugin for my PhoneGap app (using JQueryMobile). In my config.xml, I have included the plugin as shown below; <plugin name="cordova-plugin-email-composer" spec="https://github.com/katzer/cordova ...

javascriptcordovaemailjquery-mobilephonegap-plugins

I am interested in displaying all the items on the list instead of just one

<html> <head> <link rel="stylesheet" type="text/css" href="mango.css"> <script> function showItems(){ var items = document.querySelectorAll("#main li"); items.forEach(i ...

javascripthtmlcssmenuonclick

Is there a way to verify if a checkbox has been checked?

Having trouble with this code: if($('#primayins').prop('checked')) { $("#tx_nm0x0_pricingplan").val(1); } else { $("#tx_nm0x0_pricingplan").val(2); } It keeps returning false consistently ...

javajavascriptjqueryhtml

Getting the WebElement object by manually clicking an element while in an active WebDriver Session

I am currently developing a Java Swing application for managing object repositories in Selenium scripts. This application will launch a WebDriver instance and allow users to manually navigate to the desired element for inspection. My goal is to capture th ...

javascriptseleniumxpathselenium-webdriverwebdriver

Generate pre-set components using fundamental building blocks

Can I predefine some props for components? In my Vuetify example, let's say I want to customize the v-btn component with specific props. This custom implementation would act as a child component while still providing all the functionalities of the par ...

javascriptvue.jsvuetify.js