Javascript 为什么带JSON的Vue for循环不起作用？_Javascript_For Loop_Vue.js

Javascript 为什么带JSON的Vue for循环不起作用？

javascript for-loop vue.js

Javascript 为什么带JSON的Vue for循环不起作用？,javascript,for-loop,vue.js,Javascript,For Loop,Vue.js,无法使代码显示在网页上。。我不明白，因为我得到了通过Vue显示的标题，但不是“myWrapper”div部分。我已经链接了HTML头部的所有文件，这样就可以正常工作了（我早就知道了）。它在控制台中没有给我任何错误，只是它确实没有进入for循环并打印出我想要的东西（通过JSON）我的HTML代码： <!DOCTYPE html> <html lang="en"> <head> <script type="text/j

无法使代码显示在网页上。。我不明白，因为我得到了通过Vue显示的标题，但不是“myWrapper”div部分。我已经链接了HTML头部的所有文件，这样就可以正常工作了（我早就知道了）。它在控制台中没有给我任何错误，只是它确实没有进入for循环并打印出我想要的东西（通过JSON）

我的HTML代码：

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

我的JSON代码：

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:'food'

替换为

vueBurg:food

，但在实例化Vue之前设置

var food

。您可以这样更改数据属性：

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

vueBurg:'burgers'

被分配到字符串而不是数组

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