从Vue模板的ColumnValue对象中删除category_id属性

Question

我想从{{ columnValue }}中删除category_id，但是最好的办法是什么，因为我需要在第一部分中使用category_id？

<table> 
    <tr> 
    <td v-for="columnValue, column in record"> 
     <template v-if="editing.id === record.id && isUpdatable(column)"> 
     <template v-if="columnValue === record.category_id"> 
      <select class="form-control" v-model="editing.form[column]"> 
      <option v-for="column in response.joins"> 
       {{ column.category }} {{ column.id }} 
      </option> 
      </select> 
     </template> 
     <template v-else=""> 
      <div class="form-group"> 
      <input class="form-control" type="text" v-model= "editing.form[column]"> 
      <span class="helper-block" v-if="editing.errors[column]"> 
       <strong>{{ editing.errors[column][0]}}</strong> 
      </span> 
      </div> 
     </template> 
     </template> 
     <template v-else=""> 
     {{ columnValue }} // REMOVE category_id here! 
     </template> 
    </td> 
    </tr> 
</table> 

和视图（其下组我想删除的号码）： The DataTable view

脚本：

<script> 
import queryString from 'query-string' 



    export default { 
      props: ['endpoint'], 
      data() { 
       return { 
       response: { 
        table: null, 
        columntype: [], 
        records: [], 
        joins: [], 
        displayable: [], 
        updatable: [], 
        allow: {}, 
       }, 
       sort: { 
        key: 'id', 
        order: 'asc' 
       }, 
       limit: 50, 
       quickSearchQuery : '', 
       editing: { 
        id: null, 
        form: {}, 
        errors: [] 
       }, 
       search: { 
        value: '', 
        operator: 'equals', 
        column: 'id' 
       }, 
       creating: { 
        active: false, 
        form: {}, 
        errors: [] 
       }, 
       selected: [] 
       } 
      }, 
      filters: { 
       removeCategoryId: function (value) { 
       if (!value) return '' 
       delete value.category_id 
       return value 
       } 
      }, 

      computed: { 
       filteredRecords() { 
       let data = this.response.records 

       data = data.filter((row) => { 
        return Object.keys(row).some((key) => { 
        return String(row[key]).toLowerCase().indexOf(this.quickSearchQuery.toLowerCase()) > -1 
        }) 

       }) 

       if (this.sort.key) { 
        data = _.orderBy(data, (i) => { 

        let value = i[this.sort.key] 
        if (!isNaN(parseFloat(value)) && isFinite(value)) { 
         return parseFloat(value) 
        } 
        return String(i[this.sort.key]).toLowerCase() 
        }, this.sort.order) 

       } 
       return data 
       }, 
       canSelectItems() { 
       return this.filteredRecords.length <=500 
       } 
      }, 

      methods: { 
       getRecords() { 
        return axios.get(`${this.endpoint}?${this.getQueryParameters()}`).then((response) => { 
        this.response = response.data.data 
        }) 
       }, 
       getQueryParameters() { 
        return queryString.stringify({ 
        limit: this.limit, 
        ...this.search 

        }) 
       }, 
       sortBy (column){ 
        this.sort.key = column 
        this.sort.order = this.sort.order == 'asc' ? 'desc' : 'asc' 
       }, 
       edit (record) { 
        this.editing.errors = [] 
        this.editing.id = record.id 
        this.editing.form = _.pick(record, this.response.updatable) 
       }, 
       isUpdatable (column) { 
        return this.response.updatable.includes(column) 
       }, 
       toggleSelectAll() { 
        if (this.selected.length > 0) { 
        this.selected = [] 
        return 
        } 
        this.selected = _.map(this.filteredRecords, 'id') 
       }, 
       update() { 

        axios.patch(`${this.endpoint}/${this.editing.id}`, this.editing.form).then(() => { 
        this.getRecords().then(() => { 
         this.editing.id = null 
         this.editing.form = {} 
        }) 
        }).catch((error) => { 
        if (error.response.status === 422) { 
         this.editing.errors = error.response.data.errors 
        } 
        }) 
       }, 
       store() { 
       axios.post(`${this.endpoint}`, this.creating.form).then(() => { 
        this.getRecords().then(() => { 
        this.creating.active = false 
        this.creating.form = {} 
        this.creating.errors = [] 
        }) 
       }).catch((error) => { 
        if (error.response.status === 422) { 
         this.creating.errors = error.response.data.errors 
        } 
       }) 
       }, 
       destroy (record) { 
        if (!window.confirm(`Are you sure you want to delete this?`)) { 
        return 
        } 
        axios.delete(`${this.endpoint}/${record}`).then(() => { 
        this.selected = [] 
        this.getRecords() 
        }) 
       } 
      }, 

      mounted() { 
       this.getRecords() 
      }, 
     } 
    </script> 

这里是JSON：

records: [ 
{ 
id: 5, 
name: "Svineskank", 
price: "67.86", 
category_id: 1, 
category: "Flæskekød", 
visible: 1, 
created_at: "2017-09-25 23:17:23" 
}, 
{ 
id: 56, 
name: "Brisler vv", 
price: "180.91", 
category_id: 3, 
category: "Kalvekød", 
visible: 0, 
created_at: "2017-09-25 23:17:23" 
}, 
{ 
id: 185, 
name: "Mexico griller 500 gram", 
price: "35.64", 
category_id: 8, 
category: "Pølser", 
visible: 0, 
created_at: "2017-09-25 23:17:23" 
}, 
{ 
id: 188, 
name: "Leverpostej 250 gr.", 
price: "14.25", 
category_id: 9, 
category: "Pålæg", 
visible: 1, 
created_at: "2017-09-25 23:17:23" 
}, 
}] 

..等等......

Answer 1

我会建议使用Vue的一个过滤器除去属性，如：

new Vue({ 
    // ... 
    filters: { 
    removeCategoryId: function (value) { 
     if (!value) return '' 
     delete value.category_id 
     return value 
    } 
    } 
}) 

的然后在模板中使用：

{{ columnValue | removeCategoryId }} 

更新：我误解范围的循环。这工作，我jsfiddle验证：https://jsfiddle.net/spLxew15/1/

<td v-for="columnValue, column in record" v-if="column != 'category_id'">