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获取到customer.js 以防万一。

我的app.vue是

<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数据。

从Vue js和axios中制作的url应用程序获取数据时出错

1 个答案: