Question

我想从category_id删除{{ columnValue }}，但最好的方法是什么，因为我在第一部分需要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'">

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

1 个答案: