Vue click сортировать по столбцу очистить значение

Я работаю над небольшим проектом. Что я хочу сделать, так это когда происходит сортировка @click событие, столбец sortcol задается asc, desc, но. То, что я хочу, это то, что я хочу очистить значение других столбцов, кроме столбца, по которому щелкнули.

Я не мог понять, как это сделать.

<template>
  <table>
    <thead>
    <tr>
      <th v-for = "th in tableHeader" :key = "th">
        <div class = "flex" @click.prevent = "sortByColumn(th.name)">
          <div class = "sort-header-content">{{ th.text }}</div>
          <div v-if = "sortcol[th.name]==='asc'">ArrowDownIcon</div>
          <div v-else-if = "sortcol[th.name]==='desc'">ArrowUpIcon</div>
        </div>
      </th>
    </tr>
    </thead>
  </table>
</template>

<script>
export default {
  name: "Table",
  data() {
    return {
      columns: [
        {name: 'id', text: 'ID'},
        {name: 'name', text: 'Name'},
        {name: 'position', text: 'Position'},
        {name: 'office', text: 'Office'},
        {name: 'extension', text: 'Extension'},
        {name: 'startdate', text: 'Start Date'},
        {name: 'salary', text: 'Salary'},
      ],
      sortcol: {
        name: '',
        position: '',
        office: '',
        extension: '',
        startdate: '',
        salary: '',
      },
    }
  },
  methods: {
    sortByColumn(column) {
      let sortedColumn = this.sortcol[column]
      if (sortedColumn === '') {
        this.sortcol[column] = 'asc'
      } else if (sortedColumn === 'asc') {
        this.sortcol[column] = 'desc'
      } else if (sortedColumn === 'desc') {
        this.sortcol[column] = ''
      }
    },
  },
  computed: {
    tableHeader() {
      return this.columns
    },
  }
}
</script>

javascript vue.js vuejs3

13.11.2022 10:56

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы можете очистить свой объект sortcol, если свойство есть:

const app = Vue.createApp({
  data() {
    return {
      columns: [
        {name: 'id', text: 'ID'},
        {name: 'name', text: 'Name'},
        {name: 'position', text: 'Position'},
        {name: 'office', text: 'Office'},
        {name: 'extension', text: 'Extension'},
        {name: 'startdate', text: 'Start Date'},
        {name: 'salary', text: 'Salary'},
      ],
      sortcol: {},
      items: [{id: 1, name: 'aa', position: 2, office: 'AA', extension: 'tt', startdate: '12', salary: 55}, {id: 3, name: 'cc', position: 1, office: 'CC', extension: 'xx', startdate: '82', salary: 75}, {id: 2, name: 'bb', position: 8, office: 'BB', extension: 'zz', startdate: '15', salary: 35}]
    }
  },
  methods: {
    sortItems(column, col) {
      this.items = this.items.sort((a, b) => {
        return this.sortcol[column] === 'asc' ? a[col] > b[col] : a[col] < b[col] 
      })
    },
    sortByColumn(column) {
      const selected = column === Object.keys(this.sortcol)[0]
      if (selected) {
        this.sortcol[column] = this.sortcol[column] === 'asc' ? 'desc' : 'asc'
      } else {
        this.sortcol = {}
        this.sortcol[column] = 'asc'
      }
      this.sortItems(column, Object.keys(this.sortcol))
    },
  },
  computed: {
    tableHeader() {
      return this.columns
    },
  }
})
app.mount('#demo')

<script src = "https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id = "demo">
  <table>
    <thead>
    <tr>
      <th v-for = "th in tableHeader" :key = "th">
        <div class = "flex" @click.prevent = "sortByColumn(th.name)">
          <div class = "sort-header-content">{{ th.text }}</div>
          <div v-if = "sortcol[th.name]==='asc'">ArrowDownIcon</div>
          <div v-else-if = "sortcol[th.name]==='desc'">ArrowUpIcon</div>
        </div>
      </th>
    </tr>
    </thead>
    <tbody>
      <tr v-for = "item in items">
        <td v-for = "itm in item">
          {{ itm }}
        </td>
      </tr>
    </tbody>
  </table>
</div>

Спасибо за твой ответ. это будет так? let sortedEntries = this.getCurrentEntries() const sortedColumn = column === Object.keys(this.sortcol)[0] if (sortedColumn) { this.sortcol[column] = this.sortcol[column] === 'asc' ? 'desc' : 'asc' sortedEntries = $array.sorted(this.getCurrentEntries(), column, 'desc') } else { sortedEntries = $array.sorted(this.getCurrentEntries(), column, 'asc') this.sortcol = {} this.sortcol[column] = 'asc' }

— 13.11.2022 11:49

$array.sorted Если и еще в нужном месте, я не могу понять это прямо сейчас

— 13.11.2022 11:52

13.11.2022 11:11

Сначала создайте массив доступных ключей из sortcol. Затем удалите th.name, переданный функции. Затем вы можете удалить значения sortcol после выполнения цикла for..of.

new Vue({
  el: "#app",
  data() {
    return {
      columns: [
        {name: 'id', text: 'ID'},
        {name: 'name', text: 'Name'},
        {name: 'position', text: 'Position'},
        {name: 'office', text: 'Office'},
        {name: 'extension', text: 'Extension'},
        {name: 'startdate', text: 'Start Date'},
        {name: 'salary', text: 'Salary'},
      ],
      sortcol: {
        name: '',
        position: '',
        office: '',
        extension: '',
        startdate: '',
        salary: '',
      },
    }
  },
  methods: {
    sortByColumn(column) {
      let sortedColumn = this.sortcol[column]
      // Solution
      const colArr = Object.keys(this.sortcol)
      const extra = colArr.filter(e => e !== column)
      for (i of extra) {
        this.sortcol[i] = ''
      }
      
      if (sortedColumn === '') {
        this.sortcol[column] = 'asc'
      } else if (sortedColumn === 'asc') {
        this.sortcol[column] = 'desc'
      } else if (sortedColumn === 'desc') {
        this.sortcol[column] = ''
      }
    },
  },
  computed: {
    tableHeader() {
      return this.columns
    },
  }
})

<script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id = "app">
  <table>
    <thead>
      <tr>
        <th v-for = "th in columns" :key = "th.name">
          <div class = "flex" @click.prevent = "sortByColumn(th.name)">
            <div class = "sort-header-content">{{ th.text }}</div>
            <div v-if = "sortcol[th.name]==='asc'">ArrowDownIcon</div>
            <div v-else-if = "sortcol[th.name]==='desc'">ArrowUpIcon</div>
          </div>
        </th>
      </tr>
    </thead>
  </table>
</div>

13.11.2022 11:21

Другие вопросы по теме

Можно ли писать JavaScript прямо в vue js?

Как добавить функцию редактирования в приложение todolist

Как убедиться, что функция, переданная в качестве реквизита компоненту Vue, является асинхронной?

Как использовать @heroicons/vue в Nuxt3?

Почему Vue router savePosition возвращает ноль?

Vue 3 Повторная загрузка компонента при изменении переменной

Ошибки машинописного текста не отображаются в VSCode с Vue 3 и Volar

Как проверить тип слота или vnode в функции рендеринга vue3?

Обнаруженный Vetur включен. Рассмотрите возможность отключения Vetur и используйте вместо него @volar-plugins/vetur

Vue3, API композиции, массив ссылок, замена не приводит к повторному рендерингу

Vue click сортировать по столбцу очистить значение

Ответы 2

Другие вопросы по теме

Похожие вопросы