从 rest api 循环变量并将其添加到 v-list

Question

我在使用 vue.js 时遇到了一些困难。主要问题是我收到此错误 :

Property or method `response` is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for `class-based` components, by initializing the property.

我的主要想法是遍历响应（它只是一个数组）并将其添加到我的 v-list 中，使其具有类似这样的形状 :

而不是通过创建、读取等来获得我的数组元素，我想知道如何从这个问题开始。

就像我在 vue.js 列表中的部分，我知道我认为我需要使用 v-for 方法，但我什至无法在不解决错误的情况下启动它。

            <v-list-group>
              <v-list-item @click="getHosts()">
              {{response}}
              </v-list-item>
              <v-list-item-group>
              </v-list-item-group>
            </v-list-group>
          </v-list>

这是获取数组的函数。

getHosts(){
      axios.get('http://127.0.0.1:8000/something')
      .then((response)=>{
      console.log(response.data)      
      return response
      })
    }

我已经在部分方法的导出默认值中添加了这个函数，我已经阅读了其他部分并认为可能 beforeMount 但我仍然遇到错误。

感谢任何clues/help/solutions！

Answer 1

而不是直接返回响应。可以绑定数据中的响应属性.

工作演示（出于演示目的，我使用 v-for 而不是 v-list）：

var vm = new Vue({
  el: '#vue-instance',
  data() {
    return {
      hostList: []
    }
  },
  methods: {
    getHosts() {
        axios.get("https://jsonplaceholder.typicode.com/users").then(response => {
        this.hostList = response.data;
        }).catch((error) => {
        console.warn('API error');
      });
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<div id="vue-instance">
  <button v-on:click="getHosts">Get Hosts!</button>
  <ul>
    <li v-for="host in hostList">
      {{ host.name }}
    </li>
  </ul>
</div>

从 rest api 循环变量并将其添加到 v-list

looping through variable from rest api and ading it to a v-list

vue.js

vue-component

vuetify.js