I'm encountering an error when trying to return a value using the question mark operator in Vue.js - can someone explain why

When I attempted to retrieve the value using the question mark operator instead of using return twice, I encountered an error stating "Cannot read property 'omitDescription' of undefined."

buttonText() {
  return this.omitDescription ? 'プロフィールをもっと見る' : 'プロフィールを閉じる'
  // return function() {
  //   if(this.omitDescription) {
  //     return 'プロフィールをもっと見る'
  //   } else {
  //     return 'プロフィールを閉じる'
  //   }
  // }
}

The part that was commented out seemed to work fine, leaving me puzzled about the difference. Thank you!

javascriptfunctionvue.jsreturn

Answer №1

The method of implementation has changed slightly; instead of returning a function in the previous approach, try using this code:

buttonText() {
    return () => this.omitDescription ? 'View more profile' : 'Close Profile';
}

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

`Common issues when running NPM INSTALL in a Vue project`

I purchased a template and tried to install it on my PC, but I encountered an issue with the dependencies. When I run the NPM INSTALL command, I receive an error related to Python 2. About a year ago, I installed the template without any problems. However ...

node.jsvue.jsnpmnpm-install

The function User.find does not exist and it is not possible to replace the `users` model after it has

Currently, I am experimenting with using mongoose, mongoDB, next, and express in a test project. Despite referencing solutions like Cannot overwrite model once compiled Mongoose and others, I am encountering issues unique to my situation. Upon initializat ...

javascriptexpressmongoosenext.jsmodel

Tips for adjusting font size automatically to fit within its parent container every time

On my blog, the post titles are displayed in a div with a video playing in the background. The length of the title varies, ranging from 2 words to over 20 words. When the title is too long, it may overflow from its parent container where the video is playi ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is there a way to ensure that the selected value remains displayed on the select menu even after

Here is a sample code for a status select input: <label>Status:</label> <v-select :options="options" v-model="status" @input="changeValueStatus" /> data() { return { options: [ { label: 'Su ...

vue.js

The comparison between "rxjs-tslint" and "rxjs-tslint-rules" npm packages

Previously, I utilized the rxjs-tslint-rules package to identify RxJS-related issues in my projects. This package was included in the devDependencies section of my projects' package.json files. Now, there is a new rxjs-tslint package that introduces ...

javascriptangulartypescriptrxjstslint

Converting a string into a Date in Typescript while disregarding the timezone

Upon receiving a date in string format like this (e.g.): "11/10/2015 10:00:00" It's important to note that this is in UTC time. However, when creating a Date object from this string, it defaults to local time: let time = "11/10/2015 10:00:00"; let ...

javascripttypescriptdatemomentjs

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

Error: myFunction has not been declared

Can anyone figure out what's going on here? http://jsfiddle.net/sVT54/ <button onclick="myFunction()">Click me</button> <p id="demo"></p> function myFunction() { document.getElementById("demo").innerHTML="Hello World"; } ...

javascripthtml

I encountered an issue while trying to import Express into my Vue application

import express from 'express'; I'm attempting to import the Express framework into my Vue + Vite application, but I encountered an error. Is it possible to import express without using the require method? https://i.stack.imgur.com/xoyZI.pn ...

vue.jsexpressecmascript-6vite

What could be the reason for my jQuery focusout (or blur) event failing to trigger?

On the jsfiddle link provided, the HTML code at the end section looks like this: <input type="text" id="BLAboxPaymentAmount" value="2"> </br> <input type="text" id="BLAboxSection5Total" value="3"> Below that is the jQuery code snippet: ...

javascriptjqueryhtmlfocusoutjquery-focusout

Creating a chat interface with chat bubbles in React JS can be done by implementing components such as Message

Having some JSON data stored in dummyData, I am seeking guidance on how to position chat bubbles on the left and right based on the direction. My framework of choice is Material UI along with the context API. The attached image serves as a visual reference ...

javascriptcssreactjsmaterial-uijsx

Guide to seamlessly navigating to an element using a hash in NuxtJS

My aim is to create a smooth scrolling anchor link menu using Nuxt.js, where the user can click on a link and be directed to the corresponding page section. However, I'm facing a dilemma as there are multiple approaches to achieve this functionality, ...

javascriptvue.jsnuxt.jsvuexoffsetheight

Should Vue components be incorporated into blade templates as a best practice?

I have incorporated multiple Vue components into a Laravel blade template as shown below: <div id="app"> <user-list></user-list> <first-component></first-component> <seconde-component> ...

laravelvue.js

I'm experiencing some challenges with setting up my sequelize relationships

After tirelessly searching for a solution to my problem and coming up empty-handed, I decided to reach out here. Every Google search result seems unhelpful and every link I click on is disappointingly pink. Hello everyone! I'm facing difficulties est ...

javascriptnode.jssequelize.js

Exploring the features of React.js version 16

I'm confused about what {...props} does. I know it makes passing props easier, but what happens if there are no props to begin with? Take this example: const input = (props) => { let inputElement = null; switch(props.inputtype) { ...

javascriptreactjsecmascript-6

Display outcomes for chosen checkboxes

When I call the API: $url = 'https://plapi.ecomexpress.in/track_me/api/mawbd/?awb=awbnumber&order=' . $orderrecords[$k]["order_id"] . '&username=admin&password=admin123';, I retrieve the status results of all Order IDs and d ...

javascriptphpjqueryajax

Update the image on a webpage within a template using AJAX code

I manage a website that utilizes templates. Within the template, there is a main image that I need to replace on specific pages, not throughout the entire site. I am seeking a way to change this main image to a new one on select pages using Ajax. Upon re ...

javascriptjqueryajax

Unable to utilize jQuery's .append(data) function due to the need to use .val(append(data)) instead

I have been attempting to utilize JQuery .append(data) on success in order to change the value of an input to the appended data like this: .val(append(data)), but it doesn't seem to be working. Surprisingly, I can successfully change the value to a st ...

javascriptjqueryajax

unable to utilize references in React

import React, { Component } from "react"; class Learning extends Component { firstName = React.createRef(); handleSubmit = event => { event.preventDefault(); console.log(this.firstName.current.value); } ...

javascriptreactjs

What is the best way to connect a JavaScript file to an HTML file in an Express app?

I have my NodeJS server set up with Express, utilizing Handlebars as the rendering engine. app.use(express.static(publicDirPath)) (...) app.engine("hbs",hbs({ extname: "hbs", defaultView: "main", layoutsDir: path.join(srcDirP ...

javascripthtmlnode.jsexpress