Question

我不熟悉进行HTTP调用。我试图将每个对象的（特定）属性填充到下拉列表中，但没有填充，我尝试了几件事，例如for循环

created(){
  axios
    .get("https://jsonplaceholder.typicode.com/posts")
  .then(res => {
    let result = res.data
    for(i = 0; i <= result.length;i++){
      this.todos = result[i];
    }
  })
}

同时，我还尝试在<li>的响应中注销一个单一值，该值显示正常。

  <ul>
    {{user.todos}}
  </ul>

但是当我尝试在下拉列表中选择使用v-for时，例如

  <select name="" id="">
    <option value="" selected disabled>Please Select..</option>
    <option value="" v-for="todo in user.todos">{{todo}}</option>
  </select>

这是我的完整codepen。我想念/做错了什么？

Answer 1

这是使其工作的方式：

new Vue({
  el: "#app",
  data: {
    user: {
      todos: []
    }
  },
  created(){
    axios
      .get("https://jsonplaceholder.typicode.com/posts")
      .then(res => {
        cosnt result = res.data

        for(i = 0; i <= result.length;i++){
          this.user.todos.push(result[i].title);
        }
      })
  }
})

this.user.todos应该是一个数组，如果您为其分配单个值，则将无法对其进行循环以填充选择选项。

没有从HTTP响应中填充下拉列表

1 个答案: