Vue.js 使用Vue更改时更改表值

我想在用户从下拉菜单中选择值时更改表值。默认情况下，这些值以公制表示。如果用户选择标准，那么我想对每个值进行一些计算，并将度量转换为标准。还能够切换回公制

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 -->

米制的
标准
{{product.pn}}
{{product.od}}
{{product.id}
{{product.thickness}}
{{product.lo}}
{{product.weight}}

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

var vm=new Vue({
el:“#应用程序”，
数据：{
currentSort:'pn'，
currentSortDir:'asc'，
类别：'所有'，
过滤器单位：'公制'，
搜索：“”，
栏目：[
{标签：'P/N'，短代码：'pn'}，
{label:'OD（De，mm）'，短码：'OD'}，
{label:'ID（De，mm）'，短码：'ID'}，
{标签：'Thickness（De，mm）'，短代码：'Thickness'}，
{标签：'LO'，短码：'LO'}，
{标签：“重量（kg/1000）”，短码：“重量”}，
]，//列
产品：[
{ 
请注意：170158，
od:13，
身份证号码：.44，
厚度：1，
劳：45，
重量：.7，
类别：'铬'，
},{ 
请注意：1803561，
od:12，
身份证号码：.8，
厚度：.7，
劳：11，
重量：.5，
类别：'铬'，
},{ 
请注意：170149，
od:9，
id:.64，
厚度：.6，
劳：75，
重量：.3，
类别：“不锈钢”，
},{ 
pn:150149，
外径：15，
身份证号码：.22，
厚度：.3，
劳：55，
重量：.9，
类别：'铬'，
},
]，//产品
},
计算：{
showProducts（）{
退回此产品
.filter（a=>{
返回（a.pn+''）。包括（此.search）
})
.排序（（a，b）=>{
如果（this.currentSortDir==='asc'）{
//console.log（this.currentSort）；
返回a[this.currentSort]>=b[this.currentSort]；
}
返回[this.currentSort]您可以在计算属性上添加逻辑，并检查下拉列表的v模型。我已经更新了您的示例，请参阅
在我的示例中，我没有更改现有的计算结果，但您可以简单地将您的逻辑添加到其中

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
}

更新：
另一个选择是使用。我已经使用过滤器更新了您的示例

或

并在html中使用它

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

{{product.od|convertOd（过滤器单元）}
您可以在computed属性上添加逻辑，并检查下拉列表的v型。我已经更新了您的示例，请参阅
在我的示例中，我没有更改现有的计算结果，但您可以简单地将您的逻辑添加到其中

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
}

更新：
另一个选择是使用。我已经使用过滤器更新了您的示例

或

并在html中使用它

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

{{product.od|convertOd（过滤器单元）}
您可以使用计算属性，但您的代码可以按原样工作

我刚刚在
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)"
  }
}

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

我刚刚在
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)"
  }
}

不确定
metrix
将做什么，但您可以将一些代码添加到computed property=**showProducts**中以实现加法计算，如下所示。您可以详细说明单位吗？每种单位在公制和标准中应该是什么（我想您是指英制，对吧？）不确定
metrix
将做什么，但您可以将一些代码添加到computed property=**showProducts**中以实现加法计算，如下所示。您可以详细说明单位吗？每种单位在公制和标准中应该是什么（我想您是指英制，对吧？）谢谢，这回答了我的主要问题。现在我有一个问题，它无法记住我过去的OD列值。当你选择imperial时，它会进行转换…但是当你再次选择metric时，为什么它不会切换回正常状态？这里有一个更新的提琴：不要触摸你的主要属性，在你显示fi的地方创建新属性逻辑elds。用DisplayWeights检查我上面的示例。我已经更新了答案，另一个选项是使用过滤器。感谢这些过滤器非常简单和酷。但是当您从下拉列表中选择Imperial时，其他过滤器在新转换中不再正常工作。例如：如果您选择Imperial，则按.2和.2过滤OD min最大值为1。它仍在寻找更新后的默认公制数字fiddle：谢谢，这回答了我的主要问题。现在，我有一个问题，它无法记住我过去的列OD值。当选择英制时，它会进行转换…但是，当您再次选择公制时，为什么它不切换回正常值？这里有一个更更新的fiddle：不要触摸你的主属性，创建一个新属性，在其中用逻辑显示你的字段。用DisplayWeight检查我上面的例子。我更新了答案，另一个选项是使用过滤器。感谢这些过滤器非常简单和酷。但是当你从下拉列表中选择Imperial时，另一个