Как показать / скрыть части объекта после в Vue

Question

Я создаю страницу функций для продукта. Когда вы щелкнете по имени функции, оно должно развернуться ниже и дать описание.

Я взял небольшой фрагмент своих данных, который в основном структурирован так:

{
  "Section": {
    "Page1": {
      "FeatureName": "Feature desc",
      "FeatureName": "Feature desc"
    },
    "Page2": {
      "FeatureName": "Feature desc",
      "FeatureName": "Feature desc"
    }
  }
}

У меня естьВыяснили несколько способов сделать это, но лично я не думаю, что какой-либо из них является отличным подходом.

1. Цикл по объекту json / и добавление свойства show к каждой функции. Затем я могу просто переключить bool, чтобы показать / скрыть

2. На моем бэкэнд-сервере на самом деле предоставить свойство show для начала, чтобы оно было готово к использованию с vue

Ни одно из решений не сделает эти компоненты многократно используемыми (т. Е. Я могу использовать это как аккордеон в будущем, но мне придется загрязнять мои исходные данные с помощью show properties ИЛИ делать некоторые тяжелые итерации для добавления свойств, которые я не делаювсегда знаю глубину / уровни.)

Поэтому я спрашиваю, есть ли лучший подход или я перечислил единственные пути?

Answer 1

Реализация функции развернуть / свернуть, чтобы показать больше деталей, является довольно распространенной проблемой. Вот несколько способов сделать это:

1. Добавить логическое свойство для каждого объекта в коллекции. Это то, к чему сводятся оба ваших подхода. Я не ожидал бы, что сервер будет вовлечен, это полностью связано с пользовательским интерфейсом.
2. Сохраните значения показа / скрытия в отдельном массиве / объекте. Просто большой массив или объект логических значений. Это ужасно, но это избегает искажения исходных данных. В вашем случае исходные данные находятся в объекте, поэтому вы также должны использовать объект для логических значений, ключ которого совпадает с ключами исходного объекта.
3. Еще один способ избежать изменения исходных данных - это обернуть каждый из нихобъект. например, { Page1: { show: false, page: { FeatureName: ... } }. Недостатком этой структуры является то, что шаблон должен быть написан для обработки дополнительного вложения.
4. Создайте компонент для хранения соответствующего состояния для каждого элемента. Обычно это лучшее решение, но проблема в том, что состояние «показать / скрыть» является внутренним для компонента, поэтому изменить его извне нелегко. Это делает реализацию чего-то вроде «Показать все» болью. До тех пор, пока вам не нужен доступ к этому состоянию извне, это изящное решение. Пример в конце.

Все это предполагает, что каждый из блоков расширения должен действовать независимо. Если вы хотите, чтобы они были связаны так, что только один из них может быть открыт одновременно, все становится намного проще, поскольку вы можете просто сохранить идентификатор текущего развернутого элемента как свойство data.

Теперь, как и было обещаноПример использования компонента для хранения соответствующего состояния для каждого элемента:

const expander = {
  props: ['item'],
  
  data () {
    return {
      expanded: false
    }
  },
  
  template: `
    <div>
      <h4>{{ item.title }}</h4>
      <button @click="expanded = !expanded">Toggle</button>
      <p v-if="expanded">{{ item.description }}</p>
    </div>
  `
}

new Vue({
  el: '#app',
  
  components: {
    expander
  },
  
  data () {
    return {
      "Section": {
        "Page1": {
          "title": "Title 1",
          "description": "Blah blah blah blah"
        },
        "Page2": {
          "title": "Title 2",
          "description": "More more more more"
        }
      }
    }
  }
})

<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>

<div id="app">
  <expander
    v-for="(item, propertyName) in Section"
    :key="propertyName"
    :item="item"
  ></expander>
</div>