Question

当用户从下拉菜单中选择一个值时，我想更改表值。默认情况下，值以公制为单位。如果用户选择标准，那么我想对每个值运行一些数学运算并将指标转换为标准。还可以切换回公制。

html

<div class="form-filter">
  <select name="type" v-model="filter_unit" v-on:change="onSelectUnitChange">
    <option value="metric">Metric</option>
    <option value="standard">Standard</option>
  </select>
</div><!-- /filter -->

  <table style="text-align: center;">
    <thead>
      <tr>
        <th v-for="column in columns">
          <a 
            href="#"
            v-on:click="sort(column.shortcode)">{{column.label}}
          </a>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(product) in showProducts">
        <td>{{product.pn}}</td>
        <td>{{product.od}}</td>
        <td>{{product.id}}</td>
        <td>{{product.thickness}}</td>
        <td>{{product.lo}}</td>
        <td>{{product.weight}}</td>
      </tr>
    </tbody>
  </table>
</div><!-- /app -->

JavaScript

    var vm = new Vue({
        el: '#app',
        data: {
            currentSort: 'pn',
            currentSortDir: 'asc',
            category: 'all',
            filter_unit: 'metric',
            search: '',
            columns: [
                { label: 'P/N', shortcode: 'pn' },
                { label: 'OD (De,mm)', shortcode: 'od' },
                { label: 'ID (De,mm)', shortcode: 'id' },
                { label: 'Thickness (De,mm)', shortcode: 'thickness' },
                { label: 'LO', shortcode: 'lo' },
                { label: 'Weight (kg/1000)', shortcode: 'weight' },
            ], // columns
            products: [
                { 
                    pn: 170158,
                    od: 13,
                    id: .44,
                    thickness: 1,
                    lo: .45,
                    weight: .7,
                    category: 'chrome',
                },{ 
                    pn: 1803561,
                    od: 12,
                    id: .8,
                    thickness: .7,
                    lo: .11,
                    weight: .5,
                    category: 'chrome',
                },{ 
                    pn: 170149,
                    od: 9,
                    id: .64,
                    thickness: .6,
                    lo: .75,
                    weight: .3,
                    category: 'stainless',
                },{ 
                    pn: 150149,
                    od: 15,
                    id: .22,
                    thickness: .3,
                    lo: .55,
                    weight: .9,
                    category: 'chrome',
                },
            ], // products
        },
        computed: {
            showProducts(){         
                return this.products
                .filter(a => {
                    return (a.pn + '').includes(this.search)
                })
                .sort((a, b) => {
                    if (this.currentSortDir === 'asc') {
                        //console.log( this.currentSort );
                        return a[this.currentSort] >= b[this.currentSort];      
                    }
                    return a[this.currentSort] <= b[this.currentSort];
                })
            }
        },
        methods: {
            sort:function(col) {
                // if you click the same label twice
                if(this.currentSort == col){
                    // sort by asc
                    this.currentSortDir = this.currentSortDir === 'asc' ? 'desc' : 'asc';
                }else{
                    this.currentSort = col;
                }
            }, // sort

        onSelectUnitChange:function(){
                if(this.filter_unit == 'standard'){
                // change values of OD using this equation. current OD value * 0.0393701
                // change table header OD(De,mm) to OD(De,in)
                // also will be doing a similar process to ID and Thickness
                console.log('standard change');
                }
            },

        }, // methods
    }); // vue

Answer 1

您可以在计算的属性上添加逻辑，然后检查下拉列表的v模型。我已经更新了您的示例，请参见https://jsfiddle.net/tmun9cxa/74 在我的示例中，我没有更改您现有的计算量，但是您可以简单地向其中添加逻辑

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
}

更新：另一种选择是使用Vue filters。我已使用过滤器http://jsfiddle.net/eywraw8t/274069

更新了您的示例

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

或

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

并在html中使用它

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

Answer 2

您可以使用计算属性，但您的代码可以按原样工作。

我只是将转换应用于onSelectUnitChange函数中的值，并且可以正常工作。

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)"
  }
}

用Vue更改表值

2 个答案: