Arquivo Discussoes de Programacao e Tecnologia Pessoal, eu estou tentando criar um botão responsivo. Eu criei uma opção que aparece a foto dos usuários online na minha página na barra de navegação na parte de cima. Deixei essas fotos circulares e todo mundo que entra nessa página, possuindo ou não uma foto pré-carregada, aparece nessa barra.
O que eu consegui fazer até agora foi que o botão aparecesse ao lado da foto de todo mundo que entra e não consigo armazenar essas informações que eu quero que ele faça.
Tem algum exemplo do que vc quer e do que vc ja tem?
Só imaginando assim fica difícil
nao sei se entendi ainda… É tipo isso?
Isso! Exatamente
show, coloquei la no codesandbox pra vc pegar o código, aqui ia ficar bem extenso.
obs: usei o vue-styled-components, mas vc pode usar o css com as classes tbm.
agora isso… essas pessoas que vc quer armazenar ja estão logadas?
sim. eu tentei pegar o teu código e não aparece porque as pessoas já estão logadas na página. eu apenas iria pegar essas fotos e jogar no botão
E esses valores vêm do banco de dados? Como q ta acontecendo? Compartilha o código aí, não tenha vergonha não 
show, essa funcao usuariosOnline() retorna a lista de users com uma imagem, certo?! Aí só precisa trocar a variável users que fiz lá por essa: usuariosOnline
Isso! Muito obrigada mesmo! Só uma dúvida adicional, pq eu não conhecia, o que seria esse limit, que retorna um boolean e um number?
Deu certo?!
É só uma variavel que fiz mesmo, poderia ter qualquer nome…
Fiz ela pra a gente poder controlar quantas pessoas poderiam aparecer naquela lista caso a gente quisesse ativar a funcionalidade.
Então se o status for true, o array vai mostrar de 0-3 itens.
Outra forma de chamar essa variavel, (acho que assim fica melhor o entendimento kkkkk)
collapseOnlineUsers: {
isActive: true,
maxUsers: 3
};
infelizmente não. está dando esse erro: Property ‘limit’ does not exist on type 
É q vc tá usando ts né, aí sintaxe pra declarar deve ser diferente. Qual versão do vue vc tá usando?
seria a 4.5.15
bom dia.
me mostra por favor como vc fez o seu script. O export default...
O problema foi resolvido desta forma:
<template>
<layout>
<container>
<list-people>
<div v-for="(user, index) of usersShow" :key="index">
<div class="profile-image">
<img :src="user.avatar" draggable="false" :alt="user.name"/>
<div v-if="user.status === 'online'" class="green-dot"/>
</div>
<p>
{{ user.name }}
</p>
</div>
<button v-if="limit.status" class="more-button" @click="showMore()">
+
</button>
<button v-else class="more-button" @click="showLess()">-</button>
</list-people>
</container>
</layout>
</template>
<script lang="ts">
import {Container, Layout, ListPeople} from "./styles";
import {defineComponent} from "vue";
interface Limit {
status: boolean
qtd: number
}
interface UserOnline {
name: string
avatar: string
status: string
role?: string
}
export default defineComponent({
name: "WidgetBarOnline",
components: {
Layout,
Container,
ListPeople
},
data() {
return {
limit: {
status: true,
qtd: 3
} as Limit,
membroslogados: [
{
name: "Abner Rodrigues",
avatar: "https://github.com/rodriguesabner.png",
role: "moderator"
},
{
name: "Fulano",
avatar: "https://i.pravatar.cc/150?img=1",
status: "online",
role: "user"
},
{
name: "Bizarro",
avatar: "https://i.pravatar.cc/150?img=3",
status: "online",
role: "user"
},
{
name: "Bizarro",
avatar: "https://i.pravatar.cc/150?img=3",
status: "online",
role: "user"
},
{
name: "Bizarro",
avatar: "https://i.pravatar.cc/150?img=3",
status: "online",
role: "user"
},
] as UserOnline[]
};
},
computed: {
usersShow(): any {
if (this.limit.status) {
return this.membroslogados.slice(0, this.limit.qtd);
} else {
return this.membroslogados;
}
}
},
methods: {
showMore() {
this.limit.status = false;
},
showLess() {
this.limit.status = true;
},
}
});
</script>