<van-form @submit="onSubmit" v-else-if="index == '1'" > <van-cell-group inset> <!-- 物流公司 --> <van-field v-model="express" is-link readonly name="express" label="物流公司" placeholder="点击选择物流公司" @click="showExpress = true" /> <!-- 弹出层 --> <van-popup v-model:show="showExpress" position="bottom"> <van-picker :columns="expressList" @confirm="onConfirm" @cancel="showExpress = false" /> </van-popup> <!-- 物流单号 --> <van-field v-model="code" name="物流单号" label="物流单号" placeholder="填写物流单号" :rules="[{ required: true, message: '填写物流单号' }]" /> </van-cell-group> <div style="margin: 16px;"> <van-button round block type="primary" native-type="submit"> 提交 </van-button> </div> </van-form>如何在这个条件成立的情况下调用//请求物流公司 let expressName = async () => { var result = await POST({ url: '/index/expressname', }) for(var item of result.data) { expressList.push({ text: item.name, value: item.id }) } }这个方法?
时间: 2024-04-16 15:26:54 浏览: 29
在这个条件成立的情况下调用请求物流公司的方法,你可以在 `van-form` 组件中添加 `@submit` 事件,然后在事件处理函数 `onSubmit` 中调用 `expressName` 方法。
首先,在 `van-form` 组件上添加 `@submit="onSubmit"`,如下所示:
```html
<van-form @submit="onSubmit" v-else-if="index == '1'">
<!-- 表单内容 -->
</van-form>
```
然后,在你的代码中声明 `onSubmit` 方法,并在该方法内部调用 `expressName` 方法。在调用 `expressName` 方法之前,确保已经声明了 `expressList` 数组。
```javascript
let expressList = [];
let onSubmit = () => {
expressName();
// 其他表单提交逻辑...
}
let expressName = async () => {
var result = await POST({
url: '/index/expressname',
})
for (var item of result.data) {
expressList.push({
text: item.name,
value: item.id
})
}
}
```
这样,在表单提交时,会先调用 `expressName` 方法获取物流公司列表,并将结果存储在 `expressList` 数组中。然后,你可以在模板中使用 `expressList` 来渲染物流公司的选择器等相关内容。请确保在需要使用 `expressList` 的地方正确引入和使用它。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
在如下代码中新增一个验证码表单:<template> <a-typography-title :level="3"> 新特能源还原炉群控平台 </a-typography-title> <a-form class="form mt-16" ref="formRef" :model="formState" :rules="rules" v-bind="layout"> <a-form-item class="form-item" has-feedback name="username"> <a-input class="input" v-model:value="formState.username" type="text" @keyup.enter="onSubmit()" placeholder="请输入用户名" autocomplete="off" allow-clear /> </a-form-item> <a-form-item class="form-item" has-feedback name="password"> <a-input class="input" v-model:value="formState.password" type="password" @keyup.enter="onSubmit()" placeholder="请输入登录密码" autocomplete="off" allow-clear /> </a-form-item> <a-button class="login-button mt-24" type="primary" size="large" block @click="onSubmit()">登录</a-button> </a-form> @2021-2023 中科时代(北京)科技有限公司 版权所有 京ICP备2021032638号-4 </template>
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)