vue.js - Vue 编译不正确
问题描述
我正在尝试开发一些简单的东西，在外部 JSON https://api.myjson.com/bins/qs4ao中列出一些东西
Github 链接：https ://github.com/brunomosciatti/gc
但是代码随机工作......有时没有任何东西可以复制，但如果我破坏了 html 中的某些内容，例如删除结束标记（例如：）并强制生成错误消息，之后我修复了这个结束标记，然后页面编译好了。
此外，我的代码看不到我的 json 的某些部分。
<template>
<div id="app">
<main class="container player-content">
<p style="background:red;color:#fff;">{{gc.games.title}}></p>
<p style="background:red;color:#fff;">{{gc.games.cta}}</p>
<div class="col-xs-12 noPadd player-header">
<div class="col-xs-3 player-avatar">
<img src="/src/assets/images/avatar.png" width="40px" title="gc.user.name" />
<h3>{{gc.user.name}}</h3>
<h4>GC ID: {{gc.user.id}}</h4>
</div>
<div class="col-xs-6 player-progress">
<span class="casual">casual <img src="/src/assets/images/pin.svg"/></span>
<span class="amador">amador <img src="/src/assets/images/pin.svg"/></span>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="45"
aria-valuemin="0" aria-valuemax="100" style="width:45%">
<span class="sr-only">45% alcançado</span>
</div>
</div>
<span class="comp">competitivo <img src="/src/assets/images/pin.svg"/></span>
<span class="pro">pro <img src="/src/assets/images/pin.svg"/></span>
</div>
<div class="player-badges noPadd col-xs-2">
<ul>
<li><img title="Iniciante" src="/src/assets/images/beginner.svg" width="40px"/></li>
<li><img width="29px" style="margin-top:3px;" v-bind:src="gc.user.patent" /></li>
<li><img v-bind:title="gc.user.featured_medal.title" width="29px" style="margin-top:3px; margin-left:5px" v-bind:src="gc.user.featured_medal.image" /></li>
</ul>
</div>
<div class="player-patent col-xs-1 noPadd">
<img title="Ouro 2" src="/src/assets/images/patent.png" width="55px"/>
</div>
</div>
<div class="row col-xs-12 row-eq-height">
<div class="col-xs-6 sv4fun">
<span>
<img v-bind:title="gc.forfun.title" v-bind:src="gc.forfun.image" width="28px;" />
<p>4 FUN</p>
</span>
<div class="noPadd sv-card">
<ul>
<li><a href="" title="Copiar IP"><i class="far fa-copy"></i></a></li>
<li><a href="" title="Entrar no servidor"><i class="fas fa-sign-in-alt"></i></a></li>
</ul>
<span class="sv-name">#133 - Deathmatch</span>
<span class="sv-mode">DM FFA</span>
<span class="sv-map">de_overpass <em>08/16</em></span>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100" style="width:50%">
<span class="sr-only">50% ocupado</span>
</div>
</div>
</div>
<div class="noPadd sv-card">
<ul>
<li><a href="" title="Copiar IP"><i class="far fa-copy"></i></a></li>
<li><a href="" title="Entrar no servidor"><i class="fas fa-sign-in-alt"></i></a></li>
</ul>
<span class="sv-name">#133 - Deathmatch</span>
<span class="sv-mode">DM FFA</span>
<span class="sv-map">de_overpass <em>08/16</em></span>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100" style="width:50%">
<span class="sr-only">50% ocupado</span>
</div>
</div>
</div>
<div class="noPadd sv-card">
<ul>
<li><a href="" title="Copiar IP"><i class="far fa-copy"></i></a></li>
<li><a href="" title="Entrar no servidor"><i class="fas fa-sign-in-alt"></i></a></li>
</ul>
<span class="sv-name">#133 - Deathmatch</span>
<span class="sv-mode">DM FFA</span>
<span class="sv-map">de_overpass <em>08/16</em></span>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100" style="width:50%">
<span class="sr-only">50% ocupado</span>
</div>
</div>
</div>
</div>
<div class="col-xs-3 lobby">
<span><img title="LOBBY" src="/src/assets/images/lobby.svg" width="20px"/><p>LOBBY</p></span>
<div class="card-stats col-md-4">
<h3 class="partidas">1564</h3>
<h4>partidas</h4>
</div>
<div class="card-stats col-md-4">
<h3 class="vitorias">1100</h3>
<h4>vitórias</h4>
</div>
<div class="card-stats col-md-4">
<h3 class="derrotas">464</h3>
<h4>derrotas</h4>
</div>
<a href="#" title="Ir para o lobby">IR PARA LOBBY</a>
</div>
<div class="col-xs-3 ranked">
<span><img title="RANKED OPEN" src="/src/assets/images/Open.svg" width="20px"/><p>RANKED OPEN</p></span>
<div class="card-stats col-md-4">
<h3 class="partidasRanked">1564</h3>
<h4 >partidas</h4>
</div>
<div class="card-stats col-md-4">
<h3 class="vitorias">1100</h3>
<h4 >vitórias</h4>
</div>
<div class="card-stats col-md-4">
<h3 class="derrotas">464</h3>
<h4 >derrotas</h4>
</div>
<a href="#" title="Ir para o lobby"><em><i class="fas fa-users"></i> 15</em> entrar na fila</a>
</div>
<div class="col-xs-12 noPadd footer">
<a href="#"><i class="fas fa-download"></i>Download Gamers Club Anti-Cheat</a>
<div class="gc-info">
<span>{{gc.online}}</span> <p>Jogadores<em>Online</em></p>
<div class="ban"><span>{{gc.latest_banned}}</span> <p>Cheaters Banidos<em>Nos Últimos 7 dias</em></p></div>
</div>
</div>
</div>
</main>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'app',
data () {
return {
online: '',
name: '',
user: {
name: '',
id: '',
expertise : '',
is_subscriber : '',
patent : '',
level : '',
game_position: {
id: '',
title: '',
image: ''
},
featured_medal: {
id: '',
title: '',
image: ''
}
},
games: {
title: '',
cta: {
title : '',
link : '',
}
},
}
},
mounted () {
axios
.get('https://api.myjson.com/bins/qs4ao')
.then(response => {
this.gc = response.data
})
.catch(error => {
console.log(error)
this.errored = true
})
.finally(() => this.loading = false)
}
}
</script>
<style>
body {
margin: 0;
}
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
}
main {
text-align: center;
margin-top: 40px;
}
header {
margin: 0;
height: 56px;
padding: 0 16px 0 24px;
background-color: #35495E;
color: #ffffff;
}
header span {
display: block;
position: relative;
font-size: 20px;
line-height: 1;
letter-spacing: .02em;
font-weight: 400;
box-sizing: border-box;
padding-top: 16px;
}
button {
background: #51B767;
color: #ffffff;
padding: 15px;
border-radius: 0;
font-weight: bold;
font-size: 15px;
border: 0;
}
.cards {
background: #F5F5F5;
height:400px;
}
.cards:hover {
transform: translateY(-0.5em);
background: #EBEBEB;
}
.cards {
column-count: 1;
column-gap: 1em;
margin-top: 70px;
}
</style>
我希望列出 JSON 中的所有内容
解决方案
我刚刚像@Varcorb 所说的那样进行了更新，并且它变得更好了。
但我不能列出“gc.forfun.servers.title”；“gc.games.title”等...
<template>
<div id="app">
<main class="container player-content">
<div class="col-xs-12 noPadd player-header">
<div class="col-xs-3 player-avatar">
<img
src="/src/assets/images/avatar.png"
width="40px"
title="gc.user.name"
/>
<h3>{{ gc.user.name }}</h3>
<h4>GC ID: {{ gc.user.id }}</h4>
</div>
<div class="col-xs-6 player-progress">
<span class="casual">casual <img src="/src/assets/images/pin.svg"/></span>
<span class="amador">amador <img src="/src/assets/images/pin.svg"/></span>
<div class="progress">
<div
class="progress-bar"
role="progressbar"
aria-valuenow="45"
aria-valuemin="0"
aria-valuemax="100"
style="width:45%"
>
<span class="sr-only">45% alcançado</span>
</div>
</div>
<span class="comp">competitivo <img src="/src/assets/images/pin.svg"
/></span>
<span class="pro">pro <img src="/src/assets/images/pin.svg"/></span>
</div>
<div class="player-badges noPadd col-xs-2">
<ul>
<li>
<img
title="Iniciante"
src="/src/assets/images/beginner.svg"
width="40px"
/>
</li>
<li>
<img
width="29px"
style="margin-top:3px;"
v-bind:src="gc.user.patent"
/>
</li>
<li>
<img
v-bind:title="gc.user.featured_medal.title"
width="29px"
style="margin-top:3px; margin-left:5px"
v-bind:src="gc.user.featured_medal.image"
/>
</li>
</ul>
</div>
<div class="player-patent col-xs-1 noPadd">
<img
title="Ouro 2"
src="/src/assets/images/patent.png"
width="55px"
/>
</div>
</div>
<div class="row col-xs-12 row-eq-height">
<div class="col-xs-6 sv4fun">
<span>
<img
v-bind:title="gc.forfun.title"
v-bind:src="gc.forfun.image"
width="28px;"
/>
<p>4 FUN</p>
</span>
<div class="noPadd sv-card">
<ul>
<li>
<a href="" title="Copiar IP"><i class="far fa-copy"></i></a>
</li>
<li>
<a href="" title="Entrar no servidor"
><i class="fas fa-sign-in-alt"></i
></a>
</li>
</ul>
<span class="sv-name">#133 - Deathmatch</span>
<span class="sv-mode">DM FFA</span>
<span class="sv-map">de_overpass <em>08/16</em></span>
<div class="progress">
<div
class="progress-bar"
role="progressbar"
aria-valuenow="50"
aria-valuemin="0"
aria-valuemax="100"
style="width:50%"
>
<span class="sr-only">50% ocupado</span>
</div>
</div>
</div>
<div class="noPadd sv-card">
<ul>
<li>
<a href="" title="Copiar IP"><i class="far fa-copy"></i></a>
</li>
<li>
<a href="" title="Entrar no servidor"><i class="fas fa-sign-in-alt"></i></a>
</li>
</ul>
<span class="sv-name">#133 - Deathmatch</span>
<span class="sv-mode">DM FFA</span>
<span class="sv-map">de_overpass <em>08/16</em></span>
<div class="progress">
<div
class="progress-bar"
role="progressbar"
aria-valuenow="50"
aria-valuemin="0"
aria-valuemax="100"
style="width:50%"
>
<span class="sr-only">50% ocupado</span>
</div>
</div>
</div>
<div class="noPadd sv-card">
<ul>
<li>
<a href="" title="Copiar IP"><i class="far fa-copy"></i></a>
</li>
<li>
<a href="" title="Entrar no servidor"><i class="fas fa-sign-in-alt"></i></a>
</li>
</ul>
<span class="sv-name">#133 - Deathmatch</span>
<span class="sv-mode">DM FFA</span>
<span class="sv-map">de_overpass <em>08/16</em></span>
<div class="progress">
<div
class="progress-bar"
role="progressbar"
aria-valuenow="50"
aria-valuemin="0"
aria-valuemax="100"
style="width:50%"
>
<span class="sr-only">50% ocupado</span>
</div>
</div>
</div>
</div>
<div class="col-xs-3 lobby">
<span
><img
title="LOBBY"
src="/src/assets/images/lobby.svg"
width="20px"
/>
<p>LOBBY</p></span
>
<div class="card-stats col-md-4">
<h3 class="partidas">1564</h3>
<h4>partidas</h4>
</div>
<div class="card-stats col-md-4">
<h3 class="vitorias">1100</h3>
<h4>vitórias</h4>
</div>
<div class="card-stats col-md-4">
<h3 class="derrotas">464</h3>
<h4>derrotas</h4>
</div>
<a href="#" title="Ir para o lobby">IR PARA LOBBY</a>
</div>
<div class="col-xs-3 ranked">
<span
><img
title="RANKED OPEN"
src="/src/assets/images/Open.svg"
width="20px"
/>
<p>RANKED OPEN</p></span
>
<div class="card-stats col-md-4">
<h3 class="partidasRanked">1564</h3>
<h4>partidas</h4>
</div>
<div class="card-stats col-md-4">
<h3 class="vitorias">1100</h3>
<h4>vitórias</h4>
</div>
<div class="card-stats col-md-4">
<h3 class="derrotas">464</h3>
<h4>derrotas</h4>
</div>
<a href="#" title="Ir para o lobby"
><em><i class="fas fa-users"></i> 15</em> entrar na fila</a>
</div>
<div class="col-xs-12 noPadd footer">
<a href="#"
><i class="fas fa-download"></i>Download Gamers Club Anti-Cheat</a>
<div class="gc-info">
<span>{{ gc.online }}</span>
<p>Jogadores<em>Online</em></p>
<div class="ban">
<span>{{ gc.latest_banned }}</span>
<p>Cheaters Banidqos<em>Nos Últimos 7 dias</em></p>
</div>
</div>
</div>
</div>
</main>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "app",
data() {
gc: {
}
return {
online: "",
name: {},
gc: {},
user: {
name: "",
id: "",
expertise: "",
is_subscriber: "",
patent: "",
level: "",
game_position: {
id: "",
title: "",
image: ""
},
featured_medal: {
id: "",
title: "",
image: ""
}
},
games: {
title: "",
cta: {
title: "",
link: ""
}
}
};
},
mounted() {
axios
.get("https://api.myjson.com/bins/qs4ao")
.then(response => {
this.gc = response.data;
})
.catch(error => {
console.log(error);
this.errored = true;
})
.finally(() => (this.loading = false));
}
};
</script>
推荐阅读
- java - SSLHandshakeException：PKIX 路径构建失败。即使在我导入证书之后
- spring-boot - 意外的 AST 节点：（
- python - Hough Circle 中的参数表示什么以及如何知道要使用哪些值？
- c# - Unity 2017.4.34f1 无法使用 IL2CPP 构建 APK
- sql - 我需要一个查询来比较一个星期六的总销售额与今年剩余时间的平均星期六总销售额
- powershell - 使用 PowerShell GUI 进行无人值守软件安装
- c++ - 将矩形土地划分为范围
- redmine - 运行安装后步骤的 bitnami redmine 问题
- icons - 如何在 Angular 中使用旧的 Font Awesome 图标？
- reactjs - Redux 内部 axios 的自定义 Header 问题