Почему проблема?

Question

[danylo_kiz]

Вот проблема. Все есть, но в консоле пишет проблемы. Не могу понять какие, скажите.

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

И {{site}} не выводит.


Консоль

Comments

[Антон Антон]

Во первых - в f-for должно быть IN, а не IS, во вторых - надо в отладчике посмотреть, не является ли то, во что json парсится массивом, и тогда не this.cheapsites = data; а this.cheapsites = data[0];

Answer 1

[Антон Антон]

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

Comments

[Yeldos Adetbekov]

Правильно говорит!

Answer 2

[Stepanya]

попробуте так:

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

Comments

[danylo_kiz]

Такой вопрос мне лучше его в head вставлять или можно и в конец?

[danylo_kiz]

Ничего не изменилося(((

[danylo_kiz]

Серйозно, изменений 0%

Answer 3

[sergeos]

очевидно, что не объявлен div с id="cheapestsites", судя по коду:
el: "#cheapestsites",