从 Vue JS 和 Axios 制作的 URL 应用程序获取数据时出错

Question

试图将客户 js 替换为

export default[
    { id: 0, name: 'some one', title: 'zero' },
    { id: 1, name: 'test last', title:'one'},
    { id: 2, name: 'test first', title:'two'},
    { id: 3, name: 'test second', title:'three'},
    { id: 4, name: 'test third', title:'four'},
    { id: 5, name: 'test fourth', title:'five'},
    { id: 6, name: 'test fifth', title:'six'}
];

使用上述原始 json 时，我的应用程序很好。因为我正在尝试按照以下代码在同一文件中使用 axios 获取日期我缺少将数据放入应用程序的东西。

import axios from 'axios';
export default {
    data () {
        return {
            info: []
        }
    },
    mounted () {
        axios
        .get('http://localhost/json/test.json')
        .then(response => (this.info = response))
    }
}

用于将数据从 URL 获取到客户.js万一不工作。

而我的应用程序是

<template>
    <div id="app">
      <Autocomplete :items="customers"
        filterby="name"
        @change="onChange"
        title="Look for a customer"
        @selected="customerSelected"/>
    </div>
</template>
<script>
import customers from './assets/customers';
import Autocomplete from './components/Autocomplete'
export default {
  name: 'App',
  mounted() {
    this.customers = customers;
  },
  data() {
    return {
      customers: []
    };
  },
  methods: {
    customerSelected(customer) {
      console.log(`Customer Selected:nid: ${customer.id}nname: ${customer.name}ntitle:${customer.title}`);
    },
    onChange(value) {
      // do something with the current value
    }
  },
  components: {
    Autocomplete
  }
}
</script>
<style>
#app {
  margin: 0px auto;
  margin-top: 60px;
  width: 400px;
}
</style>

和 Autocomplete.vue 是

<template>
  <div class="autocomplete">
    <div class="input" @click="toggleVisible" v-text="selectedItem ? selectedItem[filterby] : ''"></div>
    <div class="placeholder" v-if="selectedItem == null" v-text="title"></div>
    <button class="close" @click="selectedItem = null" v-if="selectedItem">x</button>
    <div class="popover" v-show="visible">
      <input type="text"
        ref="input"
        v-model="query"
        @keydown.up="up"
        @keydown.down="down"
        @keydown.enter="selectItem"
        placeholder="Start Typing...">
      <div class="options" ref="optionsList">
        <ul>
          <li v-for="(match, index) in matches"
            :key="index"
            :class="{ 'selected': (selected == index)}"
            @click="itemClicked(index)"
            v-text="match[filterby]"></li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      items: {
        default: [],
        type: Array
      },
      filterby: {
        type: String
      },
      title: {
        default: 'Select One...',
        type: String
      },
      shouldReset: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        itemHeight: 39,
        selectedItem: null,
        selected: 0,
        query: '',
        visible: false
      };
    },
    methods: {
      toggleVisible() {
        this.visible = !this.visible;
        setTimeout(() => {
          this.$refs.input.focus();
        }, 50);
      },
      itemClicked(index) {
        this.selected = index;
        this.selectItem();
      },
      selectItem() {
        if (!this.matches.length) {
          return;
        }
        this.selectedItem = this.matches[this.selected];
        this.visible = false;
        if (this.shouldReset) {
          this.query = '';
          this.selected = 0;
        }
        this.$emit('selected', JSON.parse(JSON.stringify(this.selectedItem)));
      },
      up() {
        if (this.selected == 0) {
          return;
        }
        this.selected -= 1;
        this.scrollToItem();
      },
      down() {
        if (this.selected >= this.matches.length - 1) {
          return;
        }
        this.selected += 1;
        this.scrollToItem();
      },
      scrollToItem() {
        this.$refs.optionsList.scrollTop = this.selected * this.itemHeight;
      }
    },
    computed: {
      matches() {
        this.$emit('change', this.query);
        if (this.query == '') {
          return [];
        }
        return this.items.filter((item) => item[this.filterby].toLowerCase().includes(this.query.toLowerCase()))
      }
    }
  }
</script>
<style scoped>
.autocomplete {
    width: 100%;
    position: relative;
}
.input {
    height: 40px;
    border-radius: 3px;
    border: 2px solid lightgray;
    box-shadow: 0 0 10px #eceaea;
    font-size: 25px;
    padding-left: 10px;
    padding-top: 10px;
    cursor: text;
}
.close {
    position: absolute;
    right: 2px;
    top: 4px;
    background: none;
    border: none;
    font-size: 30px;
    color: lightgrey;
    cursor: pointer;
}
.placeholder {
    position: absolute;
    top: 11px;
    left: 11px;
    font-size: 25px;
    color: #d0d0d0;
    pointer-events: none;
}
.popover {
    min-height: 50px;
    border: 2px solid lightgray;
    position: absolute;
    top: 46px;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 3px;
    text-align: center;
}
.popover input {
    width: 95%;
    margin-top: 5px;
    height: 40px;
    font-size: 16px;
    border-radius: 3px;
    border: 1px solid lightgray;
    padding-left: 8px;
}
.options {
    max-height: 150px;
    overflow-y: scroll;
    margin-top: 5px;
}
.options ul {
    list-style-type: none;
    text-align: left;
    padding-left: 0;
}
.options ul li {
    border-bottom: 1px solid lightgray;
    padding: 10px;
    cursor: pointer;
    background: #f1f1f1;
}
.options ul li:first-child {
    border-top: 2px solid #d6d6d6;
}
.options ul li:not(.selected):hover {
    background: #8c8c8c;
    color: #fff;
}
.options ul li.selected {
    background: orange;
    color: #fff;
    font-weight: 600;
}
</style>

Answer 1

在大多数情况下，响应由多个属性组成，您将需要response.data 。如果这不起作用，请使用console.log(response)打印响应并检查它，以便哪个键保存 JSON 数据。