What's the best way to switch between grid and list view in Vue.js?

Question

What's the best way to switch between grid and list view in Vue.js?

    isGridView: true,
    isListView: true,

    methods: {
            
            switchView: function() {
                
          this.isGridView = !this.isGridView;
          
            },

            switchData: function () {

                this.isListView = !this.isListView;
            }

  <div class="product-grid1">item1</div>
     <div class="product-grid2">item2</div> 
     <div class="product-grid3">item3</div>
     
      <div class="product-list1">item1</div>
     <div class="product-list2">item2</div> 
     <div class="product-list3">item3</div>
     
      <div id="app-gridview">

            <div>
                <button class="button" v-on:click="switchView()"></button>
                <button class="button" v-on:click="switchData()"></button>
            </div>

            <div v-bind:class="[ isGridView ? 'grid-wrapper' : 'list-wrapper' ]">

                <div class="grid-row" v-if="isGridView">
                    <div class="grid-header" v-for="name in gridData.columns">{{ name }}</div>
                </div>

                <!-- GridView structure -->
                <div v-if="isGridView" class="grid-row" v-for="row in gridData.data">
                    <div class="list-row-item" v-for="name in gridData.columns">
                        <div>{{ row[name] }}</div>
                    </div>
                </div>

                <!-- ListView structure -->
                <div v-if="!isGridView" class="list-row" v-for="row in gridData.data">
                    <img v-bind:src="row.ImagePath" class="list-image" />
                    <div class="list-property">
                        <div class="list-row-item" v-for="name in gridData.columns">
                            <div class="list-property-name">{{ name }}</div>
                            <div>{{ row[name] }}</div>
                        </div>
                    </div>
                </div>

            </div>

I attempted to create functionality for toggling between list and grid views. I have initialized variables isGrid and isList as true, and used a ternary operator in Vue.js to enable switching between the two views.

Could you please assist me with implementing the toggle feature between list and grid views?

javascript vue.js

Answer 1

Answer №1

For those looking to create a component with a changeable view, I highly recommend utilizing the container-presentational component pattern. It's incredibly simple to manage and makes adding new "views" of data a breeze.

// Showing grid view
// Presentational component:
// Displays only what is passed through props
Vue.component("GridView", {
  props: ["users"],
  computed: {
    headers() {
      if (!this.users.length) return []
      return Object.keys(this.users[0])
    },
  },
  template: `
    <table>
      <thead>
        <tr>
          <th
            v-for="header in headers"
            :key="header"
          >
            {{ header }}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="user in users"
          :key="user.id"
        >
          <td
            v-for="(val, key) in user"
            :key="user.id + '-' + key"
          >
            {{ val }}
          </td>
        </tr>
      </tbody>
    </table>
  `
})

// Displaying the list view
// Presentational component:
// Displays only what is passed through props
Vue.component("ListView", {
  props: ["users"],
  template: `
    <ol>
      <li
        v-for="user in users"
        :key="user.id"
      >
        <div
          v-for="(val, key) in user"
          :key="user.id + '-' + key"
        >
          {{ key }}: {{ val }}
        </div>
      </li>
    </ol>
  `
})

// Managing the data:
// Fetching, mapping, transforming, etc.
// Renderless component
Vue.component("DataContainer", {
  data() {
    return {
      users: []
    }
  },
  mounted() {
    this.fetchUsers()
  },
  methods: {
    async fetchUsers() {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/users')
        const json = await response.json()
        this.users = json.map(({
          id,
          name,
          username,
          email
        }) => ({
          id,
          name,
          username,
          email
        }))
      } catch (err) {
        console.error(err)
      }
    }
  },
  render(h) {
    // Renders nothing, just provides the data
    // By passing it through "users"
    return this.$scopedSlots.default({
      users: this.users,
    })
  },
})

// The Vue instance
new Vue({
  el: "#app",
  data() {
    return {
      layout: "list-view",
    }
  },
  methods: {
    switchView() {
      this.layout = this.layout === "list-view" ? "grid-view" : "list-view"
    }
  },
  template: `
    <div>
      <button
        @click="switchView"
      >
        SWITCH VIEW
      </button>
      <data-container>
        <template
          #default="{ users }"
        >
          <component
            :is="layout"
            v-bind="{ users }"
          />
        </template>
      </data-container>
    </div>
  `,
})

table {
  border-collapse: collapse;
}

table,
tr,
th,
td {
  border: 1px solid black;
}

td,
th {
  padding: 4px 8px;
}

th {
  background-color: rgba(0, 0, 0, 0.3);
}

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5d2b28381d6f736b79767f">[email protected]</a>/dist/vue.js"></script>
<div id="app"></div>

If you're aiming for flexibility, extensibility, and maintainability in your design, consider implementing this setup instead of solely focusing on correcting specific v-if condition handling. This approach will provide a more robust solution in the long run.

Answer 2

For those looking to create a component with a changeable view, I highly recommend utilizing the container-presentational component pattern. It's incredibly simple to manage and makes adding new "views" of data a breeze.

// Showing grid view
// Presentational component:
// Displays only what is passed through props
Vue.component("GridView", {
  props: ["users"],
  computed: {
    headers() {
      if (!this.users.length) return []
      return Object.keys(this.users[0])
    },
  },
  template: `
    <table>
      <thead>
        <tr>
          <th
            v-for="header in headers"
            :key="header"
          >
            {{ header }}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="user in users"
          :key="user.id"
        >
          <td
            v-for="(val, key) in user"
            :key="user.id + '-' + key"
          >
            {{ val }}
          </td>
        </tr>
      </tbody>
    </table>
  `
})

// Displaying the list view
// Presentational component:
// Displays only what is passed through props
Vue.component("ListView", {
  props: ["users"],
  template: `
    <ol>
      <li
        v-for="user in users"
        :key="user.id"
      >
        <div
          v-for="(val, key) in user"
          :key="user.id + '-' + key"
        >
          {{ key }}: {{ val }}
        </div>
      </li>
    </ol>
  `
})

// Managing the data:
// Fetching, mapping, transforming, etc.
// Renderless component
Vue.component("DataContainer", {
  data() {
    return {
      users: []
    }
  },
  mounted() {
    this.fetchUsers()
  },
  methods: {
    async fetchUsers() {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/users')
        const json = await response.json()
        this.users = json.map(({
          id,
          name,
          username,
          email
        }) => ({
          id,
          name,
          username,
          email
        }))
      } catch (err) {
        console.error(err)
      }
    }
  },
  render(h) {
    // Renders nothing, just provides the data
    // By passing it through "users"
    return this.$scopedSlots.default({
      users: this.users,
    })
  },
})

// The Vue instance
new Vue({
  el: "#app",
  data() {
    return {
      layout: "list-view",
    }
  },
  methods: {
    switchView() {
      this.layout = this.layout === "list-view" ? "grid-view" : "list-view"
    }
  },
  template: `
    <div>
      <button
        @click="switchView"
      >
        SWITCH VIEW
      </button>
      <data-container>
        <template
          #default="{ users }"
        >
          <component
            :is="layout"
            v-bind="{ users }"
          />
        </template>
      </data-container>
    </div>
  `,
})

table {
  border-collapse: collapse;
}

table,
tr,
th,
td {
  border: 1px solid black;
}

td,
th {
  padding: 4px 8px;
}

th {
  background-color: rgba(0, 0, 0, 0.3);
}

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5d2b28381d6f736b79767f">[email protected]</a>/dist/vue.js"></script>
<div id="app"></div>

If you're aiming for flexibility, extensibility, and maintainability in your design, consider implementing this setup instead of solely focusing on correcting specific v-if condition handling. This approach will provide a more robust solution in the long run.

Answer 3

Answer №2

This is the most efficient approach

<template>
  <button @click="toggleList">change display style</button>

  <component
    :is="currentComponent"
    :columns="gridData.columns"
    :items="gridData.data"
  />
</template>

<script>
import gridComponent from "./your-grid-component.vue";
import listComponent from "./your-list-component.vue";

export default {
  components: {
    gridComponent,
    listComponent,
  },
  data() {
    return {
      listType: "grid", //grid/list
      gridData: {
        columns: [],
        data: [],
      },
    };
  },
  methods: {
    toggleList() {
      this.listType = this.listType === "grid" ? "list" : "grid";
    },
  },
  computed: {
    currentComponent() {
      return this.listType === "grid" ? "gridComponent" : "listComponent";
    },
  },
};
</script>

Answer 4

This is the most efficient approach

<template>
  <button @click="toggleList">change display style</button>

  <component
    :is="currentComponent"
    :columns="gridData.columns"
    :items="gridData.data"
  />
</template>

<script>
import gridComponent from "./your-grid-component.vue";
import listComponent from "./your-list-component.vue";

export default {
  components: {
    gridComponent,
    listComponent,
  },
  data() {
    return {
      listType: "grid", //grid/list
      gridData: {
        columns: [],
        data: [],
      },
    };
  },
  methods: {
    toggleList() {
      this.listType = this.listType === "grid" ? "list" : "grid";
    },
  },
  computed: {
    currentComponent() {
      return this.listType === "grid" ? "gridComponent" : "listComponent";
    },
  },
};
</script>

What's the best way to switch between grid and list view in Vue.js?

Answer №1

Answer №2

Similar questions

Suggestion for implementing numerous ajax countdown timers (one call per second)

Is there a way to determine whether all fields in a schema have been populated or remain empty?

Ensuring React Native/Redux child components receive the latest state updates with every change

Assign the state to a new object by preserving matching values from the previous state

Is it possible to utilize React hooks within a conditional statement?

What is the best way to transform parameters in axios requests into objects?

The final value is always returned by jQuery's each method

What could be causing my function to not register with my EventListener?

Accessing child form data from parent component in VueJs

Frontend utilizing the Next-auth Github Provider for Profile Consumption

Making Jquery functions work with Internet Explorer (including toggle and animate)

JavaScript Array failing to transfer to PHP using AJAX

sending data from an AngularJS application to an MVC controller in JSON format containing multiple arrays

Encountering an ongoing problem with trial repetition in JsPsych, which is causing the looping to continue endlessly without

Utilizing $templateCache with ui-router and minifying in AngularJS 1.x

Which is more efficient in JavaScript: Arrays, Object literals, or JSON for achieving better performance?

Leveraging personalized AngularJS directives in conjunction with ExpressJS routing

Utilize jQuery's animate method to scroll to the top after toggling a class in Vue

Loading data into a secondary dropdown list depending on the choice made in the primary dropdown list using MVC2

A guide on arranging and styling last names in an array in alphabetical order using JavaScript!