Whenever attempting to use an inline ternary operator in Vue3 TypeScript, an error stating "Property type does not exist on type boolean" arises

An error message stating that the

Property type does not exist on type boolean
is appearing when attempting to utilize the show.value boolean value.

This issue arises while trying to set the text for an icon based on its truthiness.

<template>

<div class="d-flex cursor-pointer justify-content-between border rounded bg-white mt-4 p-2 w-100 " @click="dropdown">
    <span>Purchase Requsition</span>
    <span class="material-icons fs-28 text-primary">
{{show.value ? 'arrow_circle_down' : 'arrow_circle_down' }}     </span>
</div>

</template>

<script setup lang="ts">
import { ref } from "vue";

const show = ref<boolean>(false)

function dropdown(){
   show.value = !show.value
}
</script>

<style scoped>

</style>

Answer №1

It is recommended to use show instead of show.value in your template. The usage of show.value is restricted to the script tag within the composition api.

<template>

<div class="d-flex cursor-pointer justify-content-between border rounded bg-white mt-4 p-2 w-100 " @click="dropdown">
    <span>Purchase Requsition</span>
    <span class="material-icons fs-28 text-primary">
      {{show ? 'arrow_circle_down' : 'arrow_circle_down' }}
    </span>
</div>

</template>

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

Preventing driver closure during test suites in Appium/Webdriverio: a step-by-step guide

Currently, I am in the process of testing a react native application with a specific test suite and test cases. The test case files I am working with are: login.ts doActionAfterLogin_A.ts Test Suite: [login.ts, doActionAfterLogin_A.ts] Issue at Hand: W ...

What is the process for extracting context or span from an incoming http request in NodeJS without relying on automated tools

I am currently in the process of transitioning my Node.js application from using jaeger-client to @opentelemetry/* packages. Within my Node.js application, I have a basic http server and I aim to generate a span for each response. Previously, with jaeger ...

Will the fancy box images in links load even if they are not clicked on?

I have implemented fancybox on my website to display secondary images when desired by the user. The images are stored inside fancybox links, as shown below: <a class="fancybox" title="Click to see more detail" href="media/more-detailed-image.jpg">&l ...

Conceal two DIV elements if one of them is empty

My slideshow has thumbnails connected to each slide. There are 10 DIVs representing the slides like this... <div class="SSSlide clip_frame grpelem slide" id="u751"><!-- image --> <?php while ($row = mysql_fetch_array($query ...

"Enhance your JavaScript skills with the power of jQuery

I am currently facing an issue where I need to retrieve the value of the normaltagCmt element: <div id="random no"> <div id="normaltagdialog"> <table style="width:100%; height:100%" border="2px"> <tr style="width:100%; height: ...

How do I maintain the Type<any> throughout my application state in NgRx without compromising on best practices?

Utilizing Angular 11.1.2 and rxjs 6.6.2 I am working on developing an application that dynamically displays a list of components. I have successfully achieved this functionality independently. However, I am currently encountering challenges when transitio ...

Having a problem where the Next.js project is functioning in development mode, but encountering a "module not found" error

After following multiple tutorials to integrate Typescript into my existing app, I finally got it running smoothly in dev mode using cross-env NODE_ENV=development ts-node-script ./server/index.js However, when I execute next build, it completes successfu ...

Problem with jHipster image display

I'm facing an issue while trying to load an image using Angular. The source of the image should come from an attribute of an object within an *ngFor loop, like this: <div *ngFor="let object of objects"> <img src="{{object.imagePath}}"> ...

Tips for transferring a geolocation lat lng to the `ll` property of a different function in React

I have a Geolocation.js file that retrieves the geolocation data and logs it to the console. This file is imported into an index.js file and I need to use the lat and lng values that are logged to replace the hardcoded values in the ll parameter in the fol ...

The shadow cast by the point light in Three.js seems to be misplaced

Take a look at this JS fiddle to view my code. I'm encountering an issue where there is a gap between the object and its shadow. Interestingly, this gap does not occur with spot lights. Any suggestions on how I can resolve this? Highlighted code snip ...

Adding React components dynamically through code

My journey with React is just beginning, and I am faced with a challenge of adding new components to an existing setup. However, I'm unsure of the process. Here is my current scenario: I have a list of Seances along with a button to add more: Seanc ...

The input texts are intertwined with one another through an autocomplete function

My latest project involves two input fields, one for ID and the other for Name. When I enter an ID in the first input field and then move to the second (either by pressing tab or clicking), the second input field automatically populates with the correspond ...

Is it possible to analyze the performance of NodeJS applications using Visual Studio Code?

I have managed to establish a successful connection between the VS Code debugger and my remote NodeJS target through the Chrome protocol. I am aware that this protocol allows for profiling and performance measurements within the Chrome Dev Tools, but I am ...

Sending Data to Server using Ajax and Receiving in PHP

Having some trouble with my AJAX data submission process. I can't seem to get the final value to work properly. I'm wondering if it's possible to set a PHP variable at the start of my HTML file and then use that in the AJAX post request? H ...

Creating a sliding menu using React and Headless UI (with Tailwind CSS)

Currently, I'm in the process of developing a slide-over navigation bar or slide menu that features panels opening on top of each other (I'm still searching for the most accurate way to describe it). The main concept revolves around having a sli ...

How to use AJAX to retrieve the text content of an HTML option value?

I have a script that displays a list of values, which I want to write: <option th:each = "iName : ${iNames}" th:value = "${iName}" th:text = "${iName}" th:selected="${selectedIName == iName}" In addition, I have the function setSelectedName in my .j ...

Modifying button text dynamically during save operation with AngularJS

Is it possible to dynamically change the text on a submit button while data is being saved in a form? Here's an example of the button: <button ng-click="save()">Save data</button> I have updated my save function based on some suggestion ...

Plugin for jQuery that smoothly transitions colors between different classes

After searching through numerous jQuery color plugins, I have yet to discover one that allows for animating between CSS class declarations. For instance, creating a seamless transition from .class1 to .class2: .class1 { background-color: #000000 } .class ...

What techniques can be applied to utilize JSON data in order to dynamically create menu components using the map method?

My current challenge involves dynamically generating a set of menu items using data retrieved from a JSON file. I've attempted to achieve this by mapping the values with props, but it seems like I'm overlooking something. Below is the code snipp ...

How can I assign a distinct identifier to individual instances of Vue.js components?

I am looking to build a Vue.js component that includes a label and an input. Here is an example of the structure I have in mind: <label for="inputId">Label text</label> <input id="inputId" type="text" /> Is ...