Exploring Enumerations in Vue.js and Javascript

Is there a way to implement enums in a Vue file?

I start by creating my enums in a JavaScript file

const Status= Object.freeze({
    Normal: "normal",
    Loading: "loading",
    Error: "error",
    Done: "done",
});

export default Status;

However, I encounter issues when trying to compile my main.vue file:

<template>
    <div v-if="status == AudioCardStatus.Normal">
</template>

import Status from "./../enums/status"

The error message reads:

Property or method "Status" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

I have searched for solutions on platforms like Stack Overflow, such as this SO question, but they mostly recommend using Typescript.

Answer №1

Make sure to include the imported object in the data option so that it can be accessed within the template:

import Type from "./../enums/type"

export default{
   data(){
     return{
        type:Type
     }
   }
}

Answer №2

Initially, the import is labeled as Status but it is actually referenced as AudioCardStatus. Additionally, you must assign it to a property within your data.

Furthermore, ensure that the import is encapsulated within a script tag.

Lastly, eliminate the superfluous use of ./ and simply stick with ../enums/status.

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

Check if the provided user email is already in use using the express validator

I have configured the following route in my Node.js API application: const { body } = require("express-validator"); router.post( "/user/signup", [ body("firstName").not().isEmpty().withMessage("First name is required"), body("lastName").not().i ...

Can a limit be imposed on the horizontal scrolling distance of a component to automatically wrap text?

I'm looking for a way to enable users to horizontally scroll across text within a React component while still maintaining a set width larger than the component's bounding rectangle. This would allow for regular paragraphs without any line breaks ...

While working on my Laravel and Vue.js project, I encountered the following error message: "Module not found: Error: Can't resolve './vue/app' in 'C:vue odolist esourcesjs'"

Running into an issue where the app.vue file cannot be found in the app.js. I'm using Laravel version "8.31.0" and VueJS version "^2.6.12". Any assistance would be highly appreciated. The content of app.js is: require('./bootstrap'); impor ...

The error message "Cannot read property 'properties' of undefined" is being thrown by the leaflet-search plugin

I attempted to implement the leaflet-search feature using a Vue-cli component. However, when I initiate a search, I encounter the following error message specifically related to the leaflet search function: Uncaught TypeError: Cannot read property &apo ...

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 ...

Updating parameter value upon the execution of an internal function in Javascript

How can I log the text from a textbox to the console when a button is clicked in this code snippet? <body> <input type="text" id="ttb_text" /> <script type="text/javascript"> function AppendButton() { var _text = ''; ...

Show a variety of randomly selected pictures from various sources using the command image/next

I'm in the process of building a basic news aggregation website using Next.js. I’ve run into an issue where I need to include specific domains in my next.config file for the Image component to work properly. The problem is, the URLs for the images o ...

Click on ng-click to sort through the blog entries

Currently, I am in the process of developing a blog utilizing AngularJS and JSON. Nearly everything is functioning as expected except for one particular filter item. As I am relatively new to Angular, it presents a bit of a challenge for me. The issue ari ...

Is it possible to replicate the 'authorization' parameter found in the browser?

Is there a way to use JavaScript to retrieve the API 'Authorization' parameter, which contains the access token, from the Headers section of the Inspect Tools -> Network in Firefox? Alternatively, is it possible to save a log of network traffi ...

What is the best way to securely store the OAuth access_token to be used at a later time?

My current challenge involves getting and storing an access token from the Pocket API using Node.js. I have successfully obtained the request token, redirected to the Pocket login page, returned to my site, and exchanged the request token for an access tok ...

What is the best way to configure a row layout in a Vuetify dialog component?

Encountering a layout issue. Here is the problem: https://codepen.io/positivethinking639/pen/YzzwYZq. When the dialog pops up, it appears strange because the width of the row(<v-row justify="center">) is larger than the width of the dialog, resulti ...

Tips on invoking PHP functions using JavaScript, Ajax issues with no output

After several attempts, I'm still struggling to transfer the data from my database (stored in my PHP file) to my JavaScript program. The ultimate goal is to fetch the query results and use them to generate a graph within my JavaScript file. Although ...

What is the best way to iterate through an array of images and upload them individually, ensuring that they do not have duplicate names

In my current code snippet, I am working with an array of images called images and uploading each image within that array. Everything seems to be working correctly, but I am encountering a minor issue where all the uploaded images end up having the same na ...

Show the helper text when a TextField is selected in Material UI

I would like the error message to only show up when a user clicks on the TextField. Here's my code: import React, { useState, useEffect } from 'react'; import { TextField, Grid, Button } from '@material-ui/core'; const ReplyToComm ...

What is the best way to make a request to the deployed API on Vercel?

Here is the structure of my files: root client index.js package-lock.json package.json routes.js Upon sending a request to my API, I receive a status code of 200 but an error message stating "You need to enable JavaScript to run this app." Both ...

Having trouble with submitting the second stage of a multi-step form through Ajax technology

I'm currently tackling a multi-step form project using JavaScript, specifically focusing on submitting the second step of the form via Ajax. I've taken the initiative to create a distinct JavaScript file titled ajaxRequest.js to manage the Ajax r ...

When I use the shift method on one array, it alters the contents of that array

I am encountering a peculiar issue with two arrays of objects in my program. One array is named "Responses" and the other is called "Questions." The problem arises when I remove the first element from an object in the "Questions" array using shift() meth ...

How to properly distinguish between v-if and v-for in Vue.js 3

I recently came across a discussion stating that combining v-if and v-for in Vue.js is not recommended. I encountered an error in my IDE while attempting to use both together. Can someone guide me on how to properly separate the v-if and v-for directives i ...

What is the correct way to utilize Array.reduce with Typescript?

My current approach looks something like this: [].reduce<GenericType>( (acc, { value, status, time }) => { if (time) { return { ...acc, bestValue: valu ...

Having trouble with integrating user input from HTML into a JavaScript file to execute a GET request

I am currently working on a project to create a website that integrates the google books API for users to search for books. To start, I have set up a server using express in index.js at the root of the project directory, and all my static files are stored ...