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

Question

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);

vueBurg: 'burgers' is assinged to a string and not an array — adiga
– adiga, Commented Nov 28, 2019 at 15:48

Nipun Jain · Accepted Answer · 2020-01-30 07:22:03Z

1

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

answered Jan 30, 2020 at 7:22

Nipun Jain

1,0248 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related