javascript - Vue.js + Element UI - 如何更改值 el-switch
问题描述
我有来自服务器的数据。响应数据是整数 1 或 0,鉴于我使用元素 ui el-switch,它使用布尔值 true 或 false 设置值。
有什么可以帮助我的吗?这是我的代码
<div class="row">
<el-col :span="9">
<el-form-item>
<p style="margin-top: 15px">sale in POS</p>
</el-form-item>
</el-col>
<el-col :span="15" class="switch-varian">
<el-switch inactive-color="#ff4949" v-model="product.pos_hidden" @change="valuePOS"></el-switch>
<div v-if="product.pos_hidden === 1">
<p class="desc-switch">
<strong>Yes</strong>
</p>
<p class="desc-switch">This Product Sale in POS</p>
</div>
<div v-else>
<p class="desc-switch">
<strong>No</strong>
</p>
<p>This Product Not Sale in POS</p>
</div>
</el-col>
</div>
methods: {
loadData() {
this.loading = true
let headers = {
Authorization: 'Bearer ' + window.accessToken
}
axios({
method: 'GET',
url: BASE_API + 'product/' + this.$route.params.id,
params: this.params,
headers: headers
})
.then(response => {
this.product = response.data.data
this.loading = false
})
.catch(error => {
console.log(error)
this.loading = true
this.$notify({
title: 'Error: ' + error,
type: 'warning',
message: 'Error: ' + error
})
})
},
valuePOS(val) {
if (val === true) {
fooBar | 1
} else {
fooBar | 0
}
}
预期: 我想将值从响应更改为布尔值。然后我将编辑该值并将新值作为整数值发送到服务器。
解决方案
您可以使用active-value
和inactive-value
。文档
<el-switch
v-model="product.pos_hidden"
:active-value="1"
:inactive-value="0">
</el-switch>
推荐阅读
- amazon-web-services - 在 GraphMappingConfig 中自动填充顶点属性
- sql - 找到那些在不同行中具有不同值的列?
- c# - 需要发送FIN/ACK
- python - 围绕另一个点旋转一个点会产生意想不到的结果
- wpf - 可以在没有 IoC 的情况下使用 MvvmCross Messenger 吗?
- javascript - Express Node.js react 集成(拒绝应用样式和加载资源失败)
- wordpress - 如何在循环中显示自定义分类的孩子?
- unity3d - 如何在 Unity 中处理很长的句子?
- hibernate - WildFly/Hibernate:更新嵌入属性失败
- python - 在“plotnine”图例中合并颜色和形状