Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
391 views
in Technique[技术] by (71.8m points)

javascript - 为什么带有JSON的Vue for循环不起作用?(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.

(无法获得显示在网页上的代码。.我不明白,因为我通过Vue显示了标题,但没有通过“ myWrapper” div部分显示。)

I have linked all the files in the head of the HTML so that is working (I know since earlier).

(我已经将所有文件链接到了HTML的头部,这样就可以正常工作了(我早就知道了)。)

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

(它并没有给我控制台带来任何错误,只是它确实没有进入for循环并打印出我想要的内容(通过JSON)。)

My HTML code:

(我的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>

My Vue code:

(我的Vue代码:)

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:

(我的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);
  ask by MrKnudz translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
等待大神答复

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...