如果内容混合，则显示来自JSON的值

Question

Codepen上的演示无效，因此想知道我做错了什么

HTML

let demoString = "Ändrew Gorœnš"
let foldedString = demoString.folding(options: [.diacriticInsensitive, .widthInsensitive, .caseInsensitive], locale: nil)
print(foldedString)

JS-通天塔

<div class="taco">
  <h2>{{ taco.name }}</h2>
  <p>{{ taco.recipe }}</p>
</div>

JSON-示例对象

data:{
  taco: []
},
created(){
  this.GetTacos();
},
methods: {
  GetTacos () {
    axios.get('http://taco-randomizer.herokuapp.com/random/?full-taco=true')
    .then(response => {
      let taco = response.data;
      this.taco = {
        name: taco.name,
        recipe: taco.recipe
      };
    })
  }
}

---

为了将来不再遇到同样的问题，我希望能提供一些关键词进行进一步的研究。这样我就可以更好地显示来自APIs

的数据

Answer 1

您遇到了错误：

  

混合内容：“ https://codepen.io/JGallardo/pen/bjNmNM”页面   已通过HTTPS加载，但请求了不安全的XMLHttpRequest   终点   'http://taco-randomizer.herokuapp.com/random/?full-taco=true'。这个   请求已被阻止；内容必须通过HTTPS提供。

因此，您应该使用https而不是http：

axios.get('https://taco-randomizer.herokuapp.com/random/?full-taco=true')

始终检查JavaScript控制台（ctrl + shift + j）中的错误。

Working codepen