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

尝试将客户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>

从“./资产/客户”导入客户；
从“./components/Autocomplete”导入自动完成
导出默认值{
名称：“应用程序”，
安装的（）{
这是。顾客=顾客；
},
数据（）{
返回{
顾客：[]
};
},
方法：{
选定客户（客户）{
console.log（`Customer Selected:\nid:${Customer.id}\n名称：${Customer.name}\n标题：${Customer.title}`）；
},
onChange（值）{
//使用当前值执行某些操作
}
},
组成部分：{
自动完成
}
}
#应用程序{
保证金：0px自动；
边缘顶部：60像素；
宽度：400px；
}

而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>

x



导出默认值{
道具：{
项目：{
默认值：[]，
类型：数组
},
过滤比：{
类型：字符串
},
标题：{
默认值：“选择一个…”，
类型：字符串
},
应重置：{
类型：布尔型，
默认值：true
}
},
数据（）{
返回{
身高：39，
selectedItem:null，
已选择：0，
查询：“”，
可见：假
};
},
方法：{
toggleVisible（）{
this.visible=！this.visible；
设置超时（（）=>{
这是.$refs.input.focus（）；
}, 50);
},
项目（索引）{
这是所选的=索引；
此参数为.selectItem（）；
},
selectItem（）{
如果（！this.matches.length）{
返回；
}
this.selectedItem=this.matches[this.selected]；
可见=假；
如果（此.shouldReset）{
this.query=''；
此参数为0；
}
这个.emit（'selected'，JSON.parse（JSON.stringify（this.selectedItem））；
},
up（）{
如果（this.selected==0）{
返回；
}
这是所选择的-=1；
this.scrollToItem（）；
},
向下（）{
如果（this.selected>=this.matches.length-1）{
返回；
}
这是所选的+=1；
this.scrollToItem（）；
},
scrollToItem（）{
this.$refs.optionsList.scrollTop=this.selected*this.itemHeight；
}
},
计算：{
匹配项（）{
this.emit（'change'，this.query）；
if（this.query==''）{
返回[]；
}
返回this.items.filter（（item）=>item[this.filterby].toLowerCase（）.includes（this.query.toLowerCase（））
}
}
}
.自动完成{
宽度：100%；
位置：相对位置；
}
.输入{
高度：40px；
边界半径：3px；
边框：2倍纯色浅灰色；
盒影：0 10px#eceea；
字体大小：25px；
左侧填充：10px；
填充顶部：10px；
光标：文本；
}
.结束{
位置：绝对位置；
右：2px；
顶部：4px；
背景：无；
边界：无；
字体大小：30px；
颜色：浅灰色；
光标：指针；
}
.占位符{
位置：绝对位置；
顶部：11px；
左：11px；
字体大小：25px；
颜色：#D0；
指针事件：无；
}
波弗先生{
最小高度：50px；
边框：2倍纯色浅灰色；
位置：绝对位置；
顶部：46px；
左：0；
右：0；
背景：#fff；
边界半径：3px；
文本对齐：居中；
}
.popover输入{
宽度：95%；
边缘顶部：5px；
高度：40px；
字体大小：16px；
边界半径：3px；
边框：1px实心浅灰色；
左侧填充：8px；
}
.选项{
最大高度：150像素；
溢出y：滚动；
边缘顶部：5px；
}
.选项ul{
列表样式类型：无；
文本对齐：左对齐；
左侧填充：0；
}
.ul li.选项{
边框底部：1px实心浅灰色；
填充：10px；
光标：指针；
背景#f1f1；
}
.李：第一个孩子{
边框顶部：2个实心#D6；
}
.选项ul li:未（.selected）：悬停{
背景#8c8c；
颜色：#fff；
}
.选项已选定{
背景：橙色；
颜色：#fff；
字号：600；
}

在大多数情况下，响应由多个属性组成，您将需要

响应。数据

。

---

如果这不起作用，那么使用

console.log（response）

打印响应，并检查它，以确定哪个键保存JSON数据

在这一行中，

.then（response=>（this.info=response））

是否尝试将箭头函数更改为标准函数，如：

。then（function（response）{this.info=response}）

？使用（vue工具栏用于自动加载组件）检查计算匹配项时出错：“（评估期间出错）”我认为你应该重写你的问题，最重要的是找一个比你懂一点英语的人在下面写一个好问题。没有找到console.log的位置，尝试使用{customers}

检查它是否获得了任何数据。它显示空白的“{}”json。从axios获得响应后，

。然后（函数（响应）{console.log（响应）；this.info=response；}）

查看来自ServerGet的响应错误类型错误：“this.items.filter不是函数”匹配自动完成。vue:102获取3个VueJS m自动完成。vue:1 _render7VueJSit表示

此。项

不包含数组。验证是否正在将数组

[…]

分配给

此项