代码之家  ›  专栏  ›  技术社区  ›  dede.brahma

vue.js+element ui-如何更改值el开关

  •  0
  • dede.brahma  · 技术社区  · 6 年前

    我有服务器的数据。响应数据是整数1或0,在视图中我使用element ui el开关,它用布尔值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
      }
    }
    

    预期: 我想将值从响应更改为布尔值。 然后我将编辑该值,并将新值作为整数值发送给服务器。

    1 回复  |  直到 6 年前
        1
  •  0
  •   ittus    6 年前

    你可以用 active-value inactive-value . Document

      <el-switch
        v-model="product.pos_hidden"
        :active-value="1"
        :inactive-value="0">
      </el-switch>