How To Show/hide Parts Of An Object After In Vue

I am creating a features page for a product. When you click the feature name, it should expand a box below and provide a description. I took a small snippet of my data which is bas

Solution 1:

Implementing expand/collapse to show more details is a pretty common problem. Here are a few ways you can do it:

1. Add a boolean property to each object in the collection. This is effectively what both of your approaches boil down to. I wouldn't expect the server to get involved, this is entirely a UI concern.
2. Store the show/hide values in a separate array/object. Just a big array or object of booleans. This is horrible but it does avoid mutating the original data. In your case the original data is in an object so you'd also use an object for the booleans, keyed by the same keys as the original object.
3. Another way to avoid mutating the original data is to wrap each object. e.g. { Page1: { show: false, page: { FeatureName: ... } }. The downside with this structure is that the template must be written to handle the extra nesting.
4. Create a component to hold the relevant state for each item. This is usually the best solution but the problem is that the show/hide state is internal to the component so it isn't easy to change it from the outside. This makes implementing something like 'Show all' a pain. So long as you don't need access to that state from outside it is a neat solution. Example at the end.

All of this assumes that each of the expand boxes should act independently. If you want them to be linked so that only one can be open at once it all gets much simpler as you can just store the id of the currently expanded item as a data property.

Now, as promised, an example of using a component to hold the relevant state for each item:

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

newVue({
  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"
        }
      }
    }
  }
})

<scriptsrc="https://unpkg.com/vue@2.6.10/dist/vue.js"></script><divid="app"><expanderv-for="(item, propertyName) in Section":key="propertyName":item="item"
  ></expander></div>