Question

不能获取将代码显示在网页上。.我不理解，因为我可以通过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>

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


  }
})

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

Answer 1

您的代码有错字：将template <class CharT, class Traits> std::basic_ostream<CharT, Traits>& endl(td::basic_ostream<CharT, Traits>& os);替换为T，但在实例化Vue之前设置vueBurg: 'food'。您将像这样更改数据属性：

vueBurg: food

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

1 个答案: