The variants array in VUE.js is not displaying properly

I have recently been delving into vue.js for my work and encountered a significant issue. I wanted to create a simple TODO application. In my index.html file, I only have a div for a header and a root div with an ID: #app.

Inside the root div, there is another div (with the class .todobox) where I am displaying a list of tasks using v-for. In my main.js file, when I reference the #app and input an array of tasks, the console does not display any major errors. Each task also includes a description (variant.varDesc), which is placed within a <p> element in the todobox.

Issue: Upon opening the application, it only displays one empty .todobox with a <p> element containing the text: {{variant.varDesc}}.

Can anyone offer assistance with this? Any help would be greatly appreciated! Thank you in advance!

var todo = new Vue({
    el: '#app',
    data: {
        styledone: {
            'background-color': crimson,
        },
        styleundone: {
            'text-decoration': line-through,
            'background-color': gray
        },
        variants: [
            {
                varID: 2333,
                varDesc: 'Create a new instance',
                varStyle: styledone
            },
            {
                varID: 2345,
                varDesc: 'Boot up the computer',
                varStyle: styledone
            },
            {
                varID: 2787,
                varDesc: 'Open Google Chrome',
                varStyle: styledone
            }
        ],
    }
})
body {
    margin: 0
}

#app {
    margin: 2%;
    justify-content: center;
    align-items: center;
}

.header {
    height: 100px;
    background: linear-gradient(90deg, rgba(162,148,203,0.7651435574229692) 0%, rgba(228,147,205,1) 50%, rgba(169,163,214,0.7035189075630253) 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 30px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.todobox {
    display: inline-block;
    border: 2px black solid;
    border-radius: 5%;
    color: white;
    margin-left: 2rem;
    margin-top: 2rem;
    -webkit-box-shadow: 14px 10px 5px -1px rgba(255,153,255,1);
    -moz-box-shadow: 14px 10px 5px -1px rgba(255,153,255,1);
    box-shadow: 14px 10px 5px -1px rgba(255,153,255,1);
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
}

.undone {
    background-color: crimson;
}

.done {
    text-decoration: line-through;
    background-color: gray;
}

.todobox:hover {
    cursor: pointer;
}

.todobox:active {
    box-shadow: none;
    transition: all 0.3s
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewpoint" content="width=devide-width, initial-scale=1">
        <link rel="stylesheet" href="style.css">
        <title>ToDo List</code>>
    </head>
    <body>
        <div class="header">
            <h1>Todo List</h1>
        </div>
    
        <div id="app">
            
                <div class="todobox" 
                v-for="variant in variants"
                :key="variant.varID"
                :style="{ variant.varStyle }">
                <p>{{ variant.varDesc }}</p>
                </div>

        </div>

        <script src="/main.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">

javascripthtmlcssvue.js

Answer №1

It appears that the issue lies in the order of script imports in your code. Try importing vue before your custom script to resolve the problem:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./main.js"></script>

Additionally, ensure that you reference styledone using this to prevent the error: 

main.js:15 Uncaught ReferenceError: styledone is not defined
.

Answer №2

There are a few syntax errors that need to be fixed:

  • Make sure to use quotes around the values in your style objects
  • The reference to styledone should be this.styledone
  • Change 
    :style="{ variant.varStyle }"
    to 
    :style="variant.varStyle"

var todo = new Vue({
    el: '#app',
    data: {
        styledone: {
            'background-color': 'crimson',
        },
        styleundone: {
            'text-decoration': 'line-through',
            'background-color': 'gray'
        },
        variants: [
            {
                varID: 2333,
                varDesc: 'Create a new instance',
                varStyle: this.styledone
            },
            {
                varID: 2345,
                varDesc: 'Boot up the computer',
                varStyle: this.styledone
            },
            {
                varID: 2787,
                varDesc: 'Open Google Chrome',
                varStyle: this.styledone
            }
        ],
    }
})
body {
    margin: 0
}

#app {
    margin: 2%;
    justify-content: center;
    align-items: center;
}

.header {
    height: 100px;
    background: linear-gradient(90deg, rgba(162,148,203,0.7651435574229692) 0%, rgba(228,147,205,1) 50%, rgba(169,163,214,0.7035189075630253) 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 30px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.todobox {
    display: inline-block;
    border: 2px black solid;
    border-radius: 5%;
    color: black;
    margin-left: 2rem;
    margin-top: 2rem;
    -webkit-box-shadow: 14px 10px 5px -1px rgba(255,153,255,1);
    -moz-box-shadow: 14px 10px 5px -1px rgba(255,153,255,1);
    box-shadow: 14px 10px 5px -1px rgba(255,153,255,1);
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
}

.undone {
    background-color: crimson;
}

.done {
    text-decoration: line-through;
    background-color: gray;
}

.todobox:hover {
    cursor: pointer;
}

.todobox:active {
    box-shadow: none;
    transition: all 0.3s
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewpoint" content="width=devide-width, initial-scale=1">
        <link rel="stylesheet" href="style.css">
        <title>ToDo List</title>
    </head>
    <body>
        <div class="header">
            <h1>Todo List</h1>
        </div>

        <div id="app">

                <div class="todobox"
                v-for="variant in variants"
                :key="variant.varID"
                :style="variant.varStyle">
                <p>{{ variant.varDesc }}</p>
                </div>

        </div>

        <script src="/main.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </body>
</html>

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

Display child component automatically upon parent component state update

The main component Dashboard manages the state for each ListItem added to my Watchlist. However, whenever I add an item, it is inserted into the database but only appears when I refresh the browser. class UserDashboard extends React.Component { state = ...

javascriptreactjscomponents

Is there a way to determine if a Dojo dialog has been successfully loaded on the page?

I have a function that needs to close a Dojo dialog if it is currently open. How can I determine if a dojo dialog is active? Should I rely on pure JavaScript and check for its existence by ID? if (dijit.byId("blah") !== undefined) { destroyRecursive ...

javascriptdojodialoggisesri

Setting color values for each pixel of a createGraphics object using P5.js

The code snippet provided below is intended to set the color value of each pixel within the createGraphics object to red. However, the output only displays a gray background. ////////////////////////////////////////////////////////// function setup() { ...

javascriptp5.js

What could be the reason for the Nextjs fetch request returning undefined data?

Here is the code snippet for my GET request in the API section: export default async (req, res) => { const { query: { className }, method } = req; switch (method) { case "GET": try { const classDetail = await Class.findO ...

javascriptnext.jsfetch-api

Weird Javascript behavior when classes are manipulated during mouse scrolling

Searching for a Javascript expert to assist in solving a particular issue. I have a simple function that I need help with. The goal is to add a bounceDown class when scrolling down by 1px, have it run for 5 seconds, and then remove the class for future use ...

javascriptjqueryhtmlcss

Saving Data in an Angular Material Table: A How-to Guide

I have a basic angular material table and I am looking for a way to save the data displayed in each row when a button is clicked. Is it possible to save each row of data as an object and push it to an array? If so, how can I achieve this? <div class=& ...

javascripthtmlangulartypescriptangular-material

Creating multiple child processes simultaneously can be achieved by spawning five child processes in parallel

My goal is to simultaneously run five spawn commands. I am passing five hls stream urls to the loop, and these streamlink commands are meant to record the video for 5 seconds before terminating those processes. I have attempted various async methods but a ...

javascriptnode.jsparallel-processingchild-processspawn

How to securely upload and generate a permanent link for the contents of a zip file using express js

I am new to Javascript and Node JS. I have a challenge of uploading a zip file containing only pictures and creating permanent links for these pictures. Currently, I can upload a zip file and extract its contents using the following code snippet: var expr ...

javascriptnode.jsexpress

Consistent dimensions for columns in a table, automatically adjusting based on content

Can we ensure that all rows and columns maintain equal height, whether or not they contain an image? If you need a visual representation of this concept, refer to this example: [] [] [] ...

csscss-tables

Creating an image in JavaScript from PNG data

Sorry if this is a basic question, but I'm still learning about working with images. I have a PHP script that generates a PNG image. The final two lines of the script are header('Content-Type: image/png'); imagepng($image); I am trying to ...

phpjqueryhtmlpng

injecting javascript dynamically using jquery

I am attempting to conditionally load a script in the case that the browser being used is IE8. To achieve this, I have employed jQuery's .getScript function as it allows me to execute certain actions after the script has been loaded. The issue lies in ...

javascriptjquery

Advantages and disadvantages of fetching image paths repeatedly from the database compared to retrieving them from session storage

Currently, I am displaying profile images using session like the following code snippet: <img src="<?php if (isset($_SESSION['userimage'])){ echo $_SESSION['userimage']; }?>" /> What are the advantages and disadvantages of ...

phphtmlmysqlsession

The error message "Multiple children error occurs when an empty link in Next.js

Is there a way to successfully implement a <Link /> element without any content inside it in my application? Surprisingly, when I don't provide any content, I encounter the multiple children error, even though the opposite seems to be happening. ...

javascriptreactjsnext.js

Explaining the structure of a nested object within a TypeScript declaration file

As I work on my project, I encounter the challenge of importing an object created by a dynamic function. The dynamic nature of the keys on this object poses a problem for the IDE, as it cannot determine what keys are present based on the provided config. T ...

javascripttypescriptnamespacesdeclare.d.ts

Issue with Firefox mobile's camera functionality

I am facing an issue with my web app for mobile devices where I am trying to display the mobile camera using Firefox mobile browser. I am using nodejs with express as a server and connecting to the server via localhost with my smartphone. Although Firefox ...

javascripthtmlnode.jsexpress

Margin of Google Pie Chart division

Struggling to eliminate a mysterious margin from a div generated by Google Charts, despite no defined margins in the code that could be causing it. Below is a visual representation of the problematic div: div with unidentified margin Any assistance on t ...

htmlcss

When attempting to delete an item from Firebase using React, the re-render results in the item being

I'm currently in the process of developing an app to enhance my React skills, and I've chosen Firebase for data storage. Everything seems to be working fine as all items from Firebase are rendering properly. However, I've encountered an issu ...

javascriptreactjs

Anticipating the completion of multiple observable subscription functions

Is there a way to replace and convert all words in an array using an object's method that returns an observable? I found a helpful solution on this post which uses bind to pass the correct value. After all subscriptions are complete, I want to execut ...

javascripttypescriptobservable

Once I've located the correct document, how can I search for the object with the specific date and then modify it in mongoose?

I am currently working on creating a heatmap using react-d3-heatmap, and the data structure required for this is [{date: Date, count: Number}]. Below is the schema I have set up for this model. const HeatMapSchema = new mongoose.Schema({ user: {type: ...

javascriptnode.jsmongodbexpressmongoose

When working with a destination module, what is the best method for storing the value that is returned from an

I have a simple function that exports data passed into a function expression. In a separate node module, I am utilizing this imported function by passing in parameters. The function is being called within a router.post method as shown below: Below is the ...

javascriptnode.js