CODEWITHSUNDEEP
javascriptfor-loopvue.js
MrKnudz
MrKnudz

Reputation: 41

Why does not my Vue for-loop with JSON work?

Cant get the code to show up on the webpage.. I dont understand since I get the title to show via Vue, but not the "myWrapper" div section. I have linked all the files in the head of the HTML so that is working (I know since earlier). It does not give me any errors in the console, just that it really does'nt enter the for-loop and print out the stuff I want (via JSON).

My HTML code: 

    <!DOCTYPE html>
    <html lang="en">

    <head>
      <script type="text/javascript" src="/js/menu.js"></script>
      <script src="https://vuejs.org/js/vue.js"></script>
      <script src="/js/vue_script.js" defer></script>
      <script src="/js/js_script.js" defer></script>
      <link rel="stylesheet" type="text/css" href=/css/style.css />
      <link rel="stylesheet" href="css/deli-very.css">



    <title>www.KnudHouse.no</title>

      <header id="rubrik" v-bind:title="arbitraryVariableName">
        <h2>
        Välkommna till Knudburgers!
        <br/>
        <br/>
      </h2><img id="huvudbild" src="https://parklanenewyork.com/sites/default/files/styles/masthead/public/masthead/Shrimp%20dinner.jpg?h=8abcec71&itok=AJLbkf-q" alt="Hamburgar restaurant">
      </header>
    </head>

    <body>
      <main>
    <div id ="vueMain">

    <section>
        <h2>Välj valfri burgare </h2>
        {{ arbitraryVariableName }}
    </section>

         <div class="myWrapper">
              <div class="box" v-for="burger in vueBurg" v-if="burger.stock > 0" type="checkbox">
                {{ burger.name }}
                <img v-bind:src='burger.b_image'>
          <ul>
            <li v-for="ingredient in burger.ingredients"> {{ingredient}}
            </li>
            <li v-if="burger.gluten" || "burger.lactos">
              Innehåller gluten eller laktos
            </li>
          </ul>
             </div>
            </div>

 </div>
      </main>
      </body>
    </html>

My Vue code:

function Menuitem(name, price, kCal,ingredients, gluten, lactos, stock, b_image) {
  this.name = name;
  this.price = price;
  this.kCal = kCal;
  this.ingredients = ingredients;
  this.gluten = gluten;
  this.lactos = lactos;
  this.stock = stock;
  this.b_image = b_image;
}

var vm = new Vue({
  el: '#vueMain',
  data: {
    arbitraryVariableName: 'Klicka på valfri burgare',
    vueBurg: 'food'


  }
})

My JSON code:

var food = [
  { "name": "Kycklingburgare",
    "price": 89,
    "kCal": 459,
    "ingredients":["Ost","Tomat","Saltgurka","Bröd"],
    "lactos": true,
    "gluten": false,
    "stock": 3,
    "b_image": "https://www.chatelaine.com/wp-content/uploads/2017/05/Bibimbap-homemade-burgers.jpg",
  },
  {
    "name": "Cheeseburgare",
    "price": 15,
    "kCal": 4432,
    "ingredients":["Ost","Tomat","Saltgurka","Bröd"],
    "lactos": true,
    "gluten": false,
    "stock": 5,
    "b_image": "https://www.google.com/url?sa=i&source=images&cd=&ved=2ahUKEwiPqO3E_YrmAhWC1aYKHRZtDu4QjRx6BAgBEAQ&url=https%3A%2F%2Fwww.mcdonalds.com%2Fus%2Fen-us%2Fproduct%2Fcheeseburger.html&psig=AOvVaw1kqGv5NWs0-YgDIiSGkjZD&ust=1574964343676219",
  },
  {
      "name": "KnudzSpecialBurgare",
      "price": 320,
      "kCal": 9,
      "ingredients":["Ost","Tomat","Saltgurka","Bröd"],
      "lactos": true,
      "gluten": true,
      "stock": 1,
      "b_image": "https://www.google.com/url?sa=i&source=images&cd=&cad=rja&uact=8&ved=2ahUKEwiS0uD0_YrmAhV65KYKHQ3TBd0QjRx6BAgBEAQ&url=https%3A%2F%2Fwww.pe.com%2F2014%2F06%2F30%2Fmovies-red-robin-offers-hercules-themed-burger%2F&psig=AOvVaw2uppETi_okeRTYZ4xR_Woy&ust=1574964430402148",
    },
    {
        "name": "Pizzaburgare",
        "price": 159,
        "kCal": 2443,
        "ingredients":["Ost","Tomat","Saltgurka","Bröd"],
        "lactos": true,
        "gluten": false,
        "stock": 8,
        "b_image": "https://www.google.com/url?sa=i&source=images&cd=&ved=2ahUKEwjh2ozs-YzmAhWN-ioKHWVXB80QjRx6BAgBEAQ&url=https%3A%2F%2Fwww.aftonbladet.se%2Fnyheter%2Fa%2FG15dA6%2F7-superpizzor-som-forandrade-sverige&psig=AOvVaw1z7iAkfBdSpgs5OhuXDsb6&ust=1575032069071879",
      },
      {
          "name":"Gammaldags burgare",
          "price": 100,
          "kCal": 93293,
          "ingredients":["Ost","Tomat","Saltgurka","Bröd"], 
          "lactos": false,
          "gluten": false,
          "stock": 3,
          "b_image": "https://www.google.com/url?sa=i&source=images&cd=&cad=rja&uact=8&ved=2ahUKEwj_95OC-ozmAhXopIsKHT3vD8gQjRx6BAgBEAQ&url=%2Furl%3Fsa%3Di%26source%3Dimages%26cd%3D%26ved%3D%26url%3Dhttps%253A%252F%252Fwww.buzzfeed.com%252Fhannahjewell%252Fthis-20-year-old-burger-from-mcdonalds-looks-brand-new%26psig%3DAOvVaw2in7YpWMQKkRnWMlgOatsv%26ust%3D1575032095511013&psig=AOvVaw2in7YpWMQKkRnWMlgOatsv&ust=1575032095511013",
        }
]
console.log(food);

Upvotes: 0

Views: 58

Answers (1)

Nipun Jain
Nipun Jain

Reputation: 1014

Your code have a typo: Replace vueBurg: 'food' to vueBurg: food but set var food before instantiating Vue. And you are change your data property like this:

data () {
  return {
    arbitraryVariableName: 'Klicka på valfri burgare',
    vueBurg: food
  }
}

Upvotes: 1

Related Questions