0

我正在构建一个小型应用程序，vuejs 2其中我使用v-select 包作为选择框，我面临的问题是：

我在我的组件中声明了 v-select，如下所示：

<div class="form-group"><label class="col-sm-2 control-label">Company name:</label>
    <div class="col-sm-6">
        <v-select :options="companyOptions" v-model="company_name" :on-search="getOptions" placeholder="Company name"></v-select>
    </div>
</div>

因此，我将数据定义为company_name，并且我正在调用一个axios事件来获取可搜索的数据，而在加载组件时，我正在调用前 50 个集合的索引数据进行初始选择，如果有人键入，那么我就是调用一个函数getOptions来获取与输入相关的数据，现在假设如果有人选择任何数据然后再次从选择中删除它并再次使用按键事件搜索可搜索的数据不显示，我可以看到我的axios调用工作正常并且我能够得到相关的数据。但它没有显示在下拉列表中，因为它说：

渲染函数中的错误：“TypeError：无法读取 null 的属性‘标签’”

这来自company_name选择的模型。以下是我在codepen中的代码

在这我的 axios 没有工作，因为它说混合内容：

https://codepen.io/anon/pen/Bdeqam?editors=1011 '是通过 HTTPS 加载的，但请求了一个不安全的 XMLHttpRequest 端点' http://connect.stellar-ir.com/api/companies '。此请求已被阻止；内容必须通过 HTTPS 提供。

所以我无法在这个代码集中正确解释。但是我的代码看起来和在 codepen 中声明的一样。

帮我解决这个问题。

4

1 回答 1

1

错误是因为您的计算值是undefined和undefined不是 a string，因此没有可用的字符串方法 ( toLowerCase())。response.data.model.data必须看起来像这样：

[
    {
        id: 1234,
        name: 'example'
    }, {
        id: 12345,
        name: 'example2'
    }
]

如果您得到一个对象而不是数组，则将其推送到数组：this.serverData.push(response.data.model.data)

将您的 axios 调用替换为：

this.serverData = [
    {
      id: 1234,
      name: 'example'
    }, {
      id: 12345,
      name: 'example2'
    }
]

来测试它。

在您getOptions()调用的方法中loading(true or false)，但您的fetchIndexData()方法有一个异步axios调用。使用async/await、回调函数或承诺链来等待数据并正确显示加载指示器。

在每次按键时，都会向服务器发送一个请求，我建议使用去抖动功能。

提示第 42 行：https : //stackoverflow.com/a/42028776/6429774

axios.post('http://connect.stellar-ir.com/api/companies', searchData).then(response => {
  if(response.status === 200)
    {
      this.serverData = response.data.model.data
    }
}).catch(error => {
    console.log(error)
});
于 2017-09-07T10:23:30.093 回答