Question

我在vuejs 2中构建了一个小应用程序，我使用v-select package作为选择框，我遇到的问题是：

我已经在我的组件中声明了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事件以获取可搜索的数据，而正在加载组件时我会将数据设置为getOptions。 m调用前50个用于初始选择的索引数据，如果有人输入，那么我调用函数axios来获取与输入相关的数据，现在假设有人选择任何数据然后再从中删除它选择并再次搜索按键事件，不显示可搜索的数据，我可以看到我的company_name电话工作正常，我能够获取相关数据。但它没有显示在下拉列表中，因为它说：

渲染功能出错：＆＃34; TypeError：无法读取属性＆＃39;标签＆＃39; of null＆＃34;

哪个来自所选的char*模型。以下是我在codepen

中的代码

在这方面我的axios不起作用，因为它说混合内容：

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

所以我无法在此代码集中正确解释。但我的代码看起来与codepen中声明的相同。

帮助我解决这个问题。

Answer 1

错误是因为您的计算值为undefined且undefined不是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()的{{1}}方法中，您的loading(true or false)方法有一个异步fetchIndexData()来电。使用axios，回调函数或承诺链等待数据并正确显示加载指示符。

在每个按键上，请求发送到服务器，我建议使用去抖功能。

<强>蒂普第42行：https://stackoverflow.com/a/42028776/6429774

async/await

在Vuejs

1 个答案: