vue选择商品后自动显示供应商
时间: 2023-06-18 12:03:23 浏览: 49
您可以在Vue中使用watch来监听商品选择事件,并在选择商品后触发一个方法来获取供应商信息并将其显示出来。具体实现步骤如下:
1. 在Vue组件中定义一个选择商品的方法,例如selectProduct。
2. 使用watch监听商品选择事件,例如监听商品id的变化。
3. 在selectProduct方法中,发送请求获取选择商品的供应商信息,并将其保存到Vue组件实例的data属性中。
4. 在Vue组件中使用v-if或v-show指令来判断是否有选择商品的供应商信息,并显示出来。
下面是一个简单的示例代码:
```html
<template>
<div>
<select v-model="selectedProductId">
<option value="">请选择商品</option>
<option v-for="product in products" :value="product.id">{{ product.name }}</option>
</select>
<div v-if="selectedProductSupplier">{{ selectedProductSupplier }}</div>
</div>
</template>
<script>
export default {
data() {
return {
products: [
{ id: 1, name: '商品1' },
{ id: 2, name: '商品2' },
{ id: 3, name: '商品3' },
],
selectedProductId: '',
selectedProductSupplier: '',
}
},
watch: {
selectedProductId() {
this.selectProduct()
},
},
methods: {
selectProduct() {
if (this.selectedProductId) {
// 发送请求获取商品供应商信息
const supplier = '供应商A'
this.selectedProductSupplier = supplier
} else {
this.selectedProductSupplier = ''
}
},
},
}
</script>
```
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)
![](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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)