[Vuejs]-Change table values on change with Vue

by

5👍

✅

You may add the logic on your computed property and check the v-model of the dropdown. I’ve updated your sample see https://jsfiddle.net/tmun9cxa/74
With my example I didn’t change your existing computed but you can simply add your logic to that

filteredProducts() {
  let filteredProducts = []
  let _product
  this.showProducts.forEach(product => {
    _product = product
    // do the logic here
    if (this.filter_unit === 'metric') {
      _product.displayWeight = _product.weight * 25
    } else if (this.filter_unit === 'standard') {
      _product.displayWeight = _product.weight + 10
    }
    filteredProducts.push(_product)
  })
  return filteredProducts
}

Update:
Another option is to use Vue filters. I’ve updated your example using filters http://jsfiddle.net/eywraw8t/274069

filters: {
    convertOd(val, type) {
      if (type === 'metric') {
          return val * 0.0393701
      } else if (type === 'imperial') {
        return val
      }
    }
}

or

Vue.filter('convertOd', function (val, type) {
  if (type === 'metric') {
    return val * 0.0393701
  } else if (type === 'imperial') {
    return val
  }
})

and to use it in html

<td>{{ product.od | convertOd(filter_unit) }}</td>
👤Kevin Batongbakal

1👍

You could use computed properties but your code could work as it is.

I just applied conversions on values in the onSelectUnitChange function and it worked.

onSelectUnitChange:function(){
  if(this.filter_unit == 'standard'){
    this.products.forEach(p => {
      p.od *= 0.0393701
      p.id *= 0.0393701
      p.thickness *= 0.0393701
    })
    this.columns[1].label = "OD(De,in)"
    this.columns[2].label = "ID(De,in)"
    this.columns[3].label = "Thickness(De,in)"
  } else {
    this.products.forEach(p => {
      p.od /= 0.0393701
      p.id /= 0.0393701
      p.thickness /= 0.0393701
    })
    this.columns[1].label = "OD(De,mm)"
    this.columns[2].label = "ID(De,mm)"
    this.columns[3].label = "Thickness(De,mm)"
  }
}
👤Chocolord

Leave a comment