Hey there, I am working now on filtering q-list. I have a modal window, there is I have items of q-list.
So I need to make stuff that when I click on each item in the list, at the bottom of the block, those items that I have selected come out. Moreover, you can select several elements at once, even all.

My data comes from the backend. In data, I have a list that I output to my q-list with v-for like here.

        <ModalSelect v-if="showList">
          <q-list>
            <q-item clickable v-ripple>
              <q-item-section>Open now</q-item-section>
              <q-item-section avatar>
                <img src="../statics/icons/banks/checkMark.svg" />
              </q-item-section>
            </q-item>
            <q-item clickable v-ripple v-for="(item, index) in filterList" :key="index" @click="toggleActive(item)">
              <q-item-section avatar>
                <img :src="`../statics/icons/banks/${item.icon}.svg`" />
              </q-item-section>
              <q-item-section>{{ item.title }}</q-item-section>
              <q-item-section avatar>
                <img v-show="item.isActive" src="../statics/icons/banks/checkMark.svg" />
              </q-item-section>
            </q-item>
          </q-list>
        </ModalSelect>

      ...

     filterList: [
        {
          icon: "branches",
          title: "Branches",
          isActive: false,
          type: "branch",
        },
        {
          icon: "savingBanks",
          title: "Saving Banks",
          isActive: false,
          type: "savings-bank",
        },
        {
          icon: "isUsd",
          title: "ATM (USD)",
          isActive: false,
          type: "ATM",
        }
      // and etc
     ]

The toggleActive() function is to indicate what you have chosen, that is, the checkmark icon.

My task is for the list to filter the data, that is, when one or several items are selected, it will display the same type in the lower block like here. My logic is that it would take data from the back-end, check it against the date type and return this filtered data.

I don’t need a select. I need a q-list. My problem is that I cannot find an alternative to the select v-model.
I do not need a selection, cause my list is not displayed completely initially and I cannot style them by design and I think it is easier to write a function like this in toogleActive ():

  toggleActive(s) {
      s.isActive = !s.isActive                
      // this.nearMe.filter(item => this.lala.some(f => item.type === f))
      //something like this
    }

Any help would be greatly appreciated.

@s-molinari Yes, it is working! Thank you so much!

@s-molinari
https://codepen.io/TavitaMenashe/pen/MWKmyQd

Hello Scott! Thank you for your reply. Sorry about that, here is codepen https://codepen.io/TavitaMenashe/pen/qBbmZBB

Hey there, I have a table, with a description <td> and different images. So now how I can add an image to each <td>? When I add via v-for, the pictures are added to the row, not to column:

<q-table :data="data" :columns="columns" row-key="name" hide-bottom>
    <template v-slot:body-cell-name="props">
           <q-td :props="props">
             <q-badge :label="props.value"></q-badge>
             <img v-for="(image, key) in images" :src="image.url" :key="key" />
           </q-td>
      </template>
   </q-table>

...

export default {
 data() {
   return {
     images: [
       { url: require("../statics/icons/currency-icons/usa.svg")},
       { url: require('../statics/icons/currency-icons/eu.svg')},
       { url: require('../statics/icons/currency-icons/kz.svg')},
       { url: require('../statics/icons/currency-icons/trk.svg')},
       { url: require('../statics/icons/currency-icons/gb.svg')},
       { url: require('../statics/icons/currency-icons/ru.svg')},
       { url: require('../statics/icons/currency-icons/usa.svg')},
       { url: require('../statics/icons/currency-icons/kgz.svg')},
     ],
   }
 }
}

@metalsadman Thank you very much! It is working.

Hey there, I want to make a column with colored q-badge items. For example: warning, error, info and etc. I tried with if:

      <template v-slot:body-cell-name="props">
        <div class="table-trace-row">
          {{ props.row.trace }}
        </div>
      </template>
      <template v-slot:body-cell-logLabel="props">
        <div class="flex flex-center">
          <q-tr :props="props">
            <q-badge :class="myTrClass(props)">
              {{ props.row.logLabel }}
            </q-badge>
          </q-tr>
        </div>
      </template>
    ...

   methods: {
      myTrClass(props) {
        if (props.row.logLabel === 'TRACE') {
          return 'bg-grey-3'
        }
        if (props.row.logLabel === 'WARNING') {
          return 'bg-warning'
        }
        if (props.row.logLabel === 'ERROR') {
          return 'bg-red'
        }
        if (props.row.logLabel === 'DEBUG') {
          return 'bg-green'
        }
        if (props.row.logLabel === 'INFO') {
          return 'bg-purple'
        }
      }
    }

Yes, it is working but I would like to go through the cycle and write a better option, more concise, shorter. Tell me please, what are the more convenient versions of this task?

Wooooow! it is working now !!!
I understand everything )))
@metalsadman thank you so much!
Thanks to people like you, other people don’t despair!
Finally happy

@metalsadman
https://github.com/tavitamenashe01/grpc-app
Table in grpc-app/client/src/pages/Logs.vue

Hey, here is console.log
Array of objects.
But still no data in q-table
I can’t understand where is my mistake…

(5) [{…}, {…}, {…}, {…}, {…}]
0: {id: “1”, email: “admin@admin.com”, firstName: “Admin”, lastName: “Greatest”, role: 1, …}
1: {id: “2”, email: “katyperry@gmail.com”, firstName: “Katy”, lastName: “Peach”, role: 1, …}
2: {id: “3”, email: “hello@hello.com”, firstName: “Hello”, lastName: “Hel”, role: 1, …}
3: {id: “4”, email: “john@hello.com”, firstName: “John”, lastName: “Brown”, role: 1, …}
4: {id: “5”, email: “kp@gmail.com”, firstName: "Katy ", lastName: “Perry”, role: 1, …}
length: 5
proto: Array(0)

Here is my console.log(users, “userLists”)

[Array(4)]
0: Array(4)
0: (5) [“1”, “admin@admin.com”, “Admin”, “Greatest”, 1]
1: (5) [“2”, “katyperry@gmail.com”, “Katy”, “Perry”, 1]
2: (5) [“3”, “hello@hello.com”, “Hello”, “Hel”, 1]
3: (5) [“4”, “john@hello.com”, “John”, “Brown”, 1]
length: 4
proto: Array(0)
length: 1
proto: Array(0)

@metalsadman Vue dev tools shows me this:

payload:Array[1]
0:Array[4]
0:Array[5]
1:Array[5]
2:Array[5]
3:Array[5]
type:“GET_USERS_DATA”
state
auth:Object
status:true
user:Object
users:undefined

and users - undefined

@metalsadman Oh my god, i finally got it! Thank you so much!

  <q-table
      title="Users"
      :columns="columns"
      row-key="name"
      :data="users"
    > 
...
  computed: {
    users() {
      return this.$store.state.users;
    }
  },
  created() {
    this.$store.dispatch("getUsers");
  }

mutations.js

export const GET_USERS_DATA = (state, users) => {
  state.users = users.usersList;
  console.log(users, "userLists");
};

actions.js

export const getUsers = (ctx) => {
  let getRequest = new GetAllRequest();
  let stream = client.getAll(getRequest, {});
  stream.on("data", data => {
    ctx.commit("GET_USERS_DATA", data.toObject());
  });
  stream.on("error", err => {});
  stream.on("status", status => {});
  stream.on("end", () => {});
};

It is finally showing data (arrays of objects - each user) in Vue dev tools BUT q-table says No data available : (

Thank you so much for the tips!

@metalsadman 1) Thanks for noticing my mistake with mapAction. Already fixed it.
2) But in Vue dev tools i see a registered user.
And trying to dislpay this data, and am I really thinking wrong?

Hey Quasar gurus,

There is q-table where i need to display all data = all users from vuex, actions.js :

export const getUsers = () => {
  let getRequest = new GetAllRequest();
  let stream = client.getAll(getRequest, {});
  stream.on("data", data => {
    console.log(data.toObject());
  });
  stream.on("error", err => {});
  stream.on("status", status => {});
  stream.on("end", () => {});
};

Here is my Logs.vue:

<q-table
      title="Users"
      :columns="columns"
      row-key="name"
      :data="getUsersTable"
      :pagination.sync="pagination"
      :loading="loading"
      :filter="filter"
    >
      <template v-slot:body="props">
        <q-tr :props="props">
          <q-td key="id" :props="props">{{ props.row.id }}</q-td>
          <q-td key="firstName" :props="props">{{ props.row.firstName }}</q-td>
        </q-tr>
      </template>
    </q-table>
...
<script>
import { mapActions } from "vuex";

export default {
  data() {
    return {
      filter: "",
      loading: false,
      pagination: {
        sortBy: "desc",
        descending: false,
        page: 1,
        rowsPerPage: 3,
        rowsNumber: 10
      },
      columns: [
        {
          name: "id",
          required: true,
          label: "id",
          align: "left",
          field: row => row.name,
          sortable: true
        },
        {
          name: "fistName",
          required: true,
          label: "first name",
          align: "left",
          field: row => row.firstName,
          sortable: false
        },
        {
          name: "lastName",
          required: true,
          label: "last name",
          align: "left",
          field: row => row.lastName,
          sortable: true
        },
        {
          name: "email",
          required: true,
          label: "email",
          align: "left",
          field: row => row.email,
          sortable: true
        }
      ]
    };
  },
  computed: {
    ...mapActions({ getUsersObject: "getUsers" }),
    getUsersTable() {
      return Object.values(this.getUsersObject);
    }
  }
};
</script>

But it displays only in console.log.
I will be so gratefull for all responses and +100500 for your karma!

Thank you very much! With your help I solved the problem, my mistake was that I put the LoginLayout.vue in the MainLayout.vue.
Now working )))

@jraez thank you for your response!
I tryed like this:
{
path: “/register”,
component: () => import(“layouts/RegisterLayout.vue”),
children: [
{
path: “”,
component: () => import("…/components/auth/Register.vue")
}
]
},
And my Register Layout unfortunately still have left sidebar (
This is my LoginLayout.vue:
<q-layout view=“lHh lpR fFf” class=“img-background”>…</q-layout>