Javascript 无法使用Vue.js从opendweathermap获取天气数据

我想使用Vue.js创建一个简单的天气预报网站，我刚刚学习了这个框架，以前访问过公共数据。但这次我被卡住了

我尝试获取数据的方法有两个版本

var app=新的Vue{ 埃尔：天气， 数据：{ 城市：， 天气：[]， 日期：new date.toDateString， 招呼： }, 方法：{ //方法1 getData:函数{ var city=this.city $.getJSONhttp://api.openweathermap.org/data/2.5/weather?q= +城市+&单位=公制&朗=en&appid=a495404234abce9b5830b1e8d20e90a6， 函数数据{ console.logdata }; }, //方法2 getData:函数{ $search.keypress功能e{ 如果e.which==13{ var city=$search.val； 如果城市！={ 变量url=http://api.openweathermap.org/data/2.5/weather?q= +城市+和单位=公制和语言=英语和应用ID=a495404234abce9b5830b1e8d20e90a6； console.logurl； } $.getJSONurl，函数数据{ this.weather=data.weather； 控制台日志数据； 这是一种问候； } } } }, } } }; 天气预报员 {{date}} {{问候语}

{{城市} {{data}}

{{data.weather[0].main} {{data.weather[0].description}}-> 将数据视为您的模型。不要直接在视图中引用数据，而是引用模型上的特性

所以用{{city}代替{{data.city}

var app=新的Vue{ 埃尔：天气， 资料{ 返回{ 城市：， 天气：[]， 日期：new date.toDateString， 招呼： }; }, 方法：{ 获取数据{ fetchhttp://api.openweathermap.org/data/2.5/weather?q= +this.city+&units=metric&lang=en&appid=a495404234abce9b5830b1e8d20e90a6 .thenres=>res.json .thendata=>{ this.weather=data.weather； }; } } }; 天气预报员 {{date}} {{问候语}

{{城市} {{d}

---

看起来zero比我快，但这里有一个使用jquery调用的版本

如评论中所述，问题在于没有定义data.data。所以在数据中定义数据，并将结果分配给这个.data。但是，由于它位于函数内部且作用域发生变化，因此需要使用var that=this和that.data=data存储作用域以分配结果

dom:

---

以下是一个问题。

我发现了问题的原因：

我需要在数据中定义数据，因为我直接在html页面中引用数据，但这是可选的。 事实证明，有一个来自引导的瘦jQuery版本覆盖了minjQuery。而$.getJSON需要最小jQuery。

---

@zero298，仅针对组件，这里的问题是data.data不存在为什么-1？只是随便说说，还是有一些关于如何改进答案的反馈？是的，我必须在数据中定义数据。这解决了Vue警告问题。谢谢。这是我的否决票，不是故意的。对答案进行了简单的编辑，这样我就可以删除它了。是的！谢谢事实证明，引导库也会导致问题。

<div class="container" id="weather">
  <h1>Weather Pro</h1>
  <div class="float-left"><h2>{{date}}</h2></div>
  <div class="float-right" ><h3 id="time"></h3></div>
  <p>{{greeting}}</p>

  <div class="input-group">
    <form>
      <input v-model="city" class='searchbar transparent' id='search' type='text' placeholder='      enter city' />

      <input id='button' @click="getData" type="button" value='GO' />

    </form>
  </div>

  {{city}}
  <div class="panel">

    <div class="panel-body" v-for="d in data">
      <p>
        {{d}}
      </p>
    </div>
    <ul class="list-group list-group-flush">
    </ul>

  </div>
</div>

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

var app = new Vue({
  el: "#weather",
  data: {
    city: '',
    weather:[],
    date: new Date().toDateString(),
    greeting:'',
    data: null,

  },

  methods: {
    //method 1
    getData: function () {
      var that = this;
      var city = this.city
      console.log('getData')
      $.getJSON("https://api.openweathermap.org/data/2.5/weather?q=" + city + "&units=metric&lang=en&appid=a495404234abce9b5830b1e8d20e90a6", 
                function (data) {
        console.log(data)
        that.data = data;
      });

    },
  }
});