1

I've been recently studying vue.js for work and I faced a serious issue. I wanted to make a simple TODO application. In my index.html I don't have anything but div for a header and a root div with an id:#app.

In the root div I have another div (with a class .todobox), where I'm putting a list of variants using v-for. When I refer in my main.js file to #app and put there an array of variants, the console doesn't show any major errors. My variants also contain a certain description (variant.varDesc), which I keep inside the <p> element in todobox.

Problem: When I open an application it only shows one blank .todobox and a <p> element inside with a following text: {{variant.varDesc}}.

Can anyone help me out? I will appreciate any help! Thanks 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</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>
double-beep
  • 5,031
  • 17
  • 33
  • 41
JoshJohnson
  • 181
  • 3
  • 18

2 Answers2

1

Looks to me like you import your script before importing vue. Change the order of your script tags and it should work:

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

Also make sure to reference styledone with this. Otherwise you get an error: main.js:15 Uncaught ReferenceError: styledone is not defined.

Matthias
  • 3,729
  • 22
  • 37
  • Thanks for the tip! Although I've changed the code this way, the result is still the same :( Also now I'm getting ```Not allowed to load local resource: file:///main.js``` in the console. – JoshJohnson Aug 13 '20 at 08:07
  • hm.. ok, never saw that before. I googled a bit and stumpled about these two question [Http-Server](https://stackoverflow.com/questions/18586921/how-to-launch-html-using-chrome-at-allow-file-access-from-files-mode) (check the second answer) and [Web server for chrome](https://stackoverflow.com/questions/39007243/cannot-open-local-file-chrome-not-allowed-to-load-local-resource) . Hopefully that will help you. In general it seems that your browser is not allowed to access your js file so in order to access it you need to use a local server. – Matthias Aug 13 '20 at 10:20
  • Thanks a lot! Everything worked on installing a web server! – JoshJohnson Aug 13 '20 at 11:10
0

You have some syntax errors:

  • Your style objects need to have quotes around their values
  • styledone needs to be referenced as this.styledone
  • :style="{ variant.varStyle }" should be :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>
Daniel_Knights
  • 7,940
  • 4
  • 21
  • 49
  • Thanks @Daniel_Knights! I tried your solution, changed the code accordingly, but oddly enough the result on the page remained the same. However, now the console's output is ```Not allowed to load local resource: file:///main.js```. – JoshJohnson Aug 13 '20 at 08:05
  • Sounds like it could be an issue with `main.js` in that case – Daniel_Knights Aug 13 '20 at 08:10