D
D
danylo_kiz2017-03-21 21:52:29
JavaScript
danylo_kiz, 2017-03-21 21:52:29

Why is it problem?

Here's the problem. Everything is there, but it writes problems in the console. I can't figure out which one, please tell me.

<div class="container content">
      <div class="row">
        <div  class="col-sm-8 col-sm-offset-2">
          <div id="one" class="text-left list-inline">
            <h3 class="text-primary"><img class="img-rounded" src="macbook-gifka.gif" width="70" height="60">When is the best time to buy Macbook?</h3>
            <hr>
            <p>{{short}}</p>
            <button class="btn btn-default"><a href="./macbook-more1.html">More</a></button>
          </div>
          <hr>
          <div class="text-inline text-left">
            <h3 class="text-danger">Internet Shops With International Delivery And Cheap Prices</h3>
            <hr>
            <ol>
              <b>
                <li v-for="site is cheapsites.thecheapestsites">{{site[0]}}</li>
                <li>{{site[1]}}</li>
                <li>{{site[2]}}</li>
                <li>{{site[3]}}</li>
                <li>{{site[4]}}</li>
                <li>{{site[5]}}</li>
              </b>
            </ol>
            <button class="btn btn-default"><a href="./cheap-sites-eng.html">More</a></button>
          </div>
        </div>
      </div>
    </div>
  </body>
  <div>
    <script type="text/javascript">
      new Vue({
        el: "#cheapestsites",
        data: {
          cheapsites: []
        },
        mounted(){
          fetch("http://danya.loc/all.json").then(c => c.json()).then((data) => {
            this.cheapsites = data;
          })
        }
      })
    </script>
    <script type="text/javascript">
      new Vue({
  				src: "./all.json",
  				el: "#one",
  				data: {
    				short: "Generally, most people prefe..."
  				}
      })
 	 	</script>
 	</div>

JSON
[
  {
    "macfulleng": "As a rule, most people prefer to bu, Apple will rarely deviate from this path.",
    "macfullrus": "Как правило, большинство людейяться от этого пути.",
    "macbookfullimg": "./macbook-img.jpg",
    "macbookshortimg": "./macbook-gifka.gif",
    "thecheapestsites": ["AliExpress", "TheHut", "Sheinside", "BookDepository", "DealeXtreme", "599fashion", "ShortsDirect", "Ebay", "Amazon", "OLX"]
  }
    
]

And {{site}} doesn't render.
8a5f5fffe2be45b7b503c4021e5d53fc.png
Console977abda32c7c48b99f79c3041950bfdc.png

Answer the question

In order to leave comments, you need to log in

3 answer(s)
A
Anton Anton, 2017-03-21
@Fragster

<b>
                <li v-for="site in cheapsites.thecheapestsites">{{site}}</li>
              </b>

S
Stepanya, 2017-03-21
@Stepanya

try like this:

<script type="text/javascript">
window.onload = function () {
ew Vue({
        el: "#cheapestsites",
        data: {
          cheapsites: []
        },
        mounted(){
          fetch("http://danya.loc/all.json").then(c => c.json()).then((data) => {
            this.cheapsites = data;
          })
        }
      });
      new Vue({
  	src: "./all.json",
  	el: "#one",
  	data: {
    	  short: "Generally, most people prefe..."
        }
      })
}
</script>

S
sergeos, 2017-05-15
@sergeos

obviously the div with id="cheapestsites" is not declared, judging by the code:
el: "#cheapestsites",

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question