Skip to main content

Respostas interessantes marcadas com a tag

10 votos
Aceito

VUE filtro de valor no v-for

Você pode usar o computed para resolver o problema. Assim: new Vue({ el: '#app', data: { meus_valores: [/** **/] }, computed: { meus_valores_filtrados: function (...
Wallace Vizerra's user avatar
5 votos
Aceito

Variáveis no App.vue

Uma maneira de fazer, se no caso você possui um <router-view> no seu App.vue, e o componente que você está emitindo o evento de preenchimento do 'Teste Cliente' estiver um nível abaixo apenas, ...
guastallaigor's user avatar
5 votos
Aceito

Como deletar um item de um objeto usando um ID interno (Vue-2)

Uma maneira de fazer isso seria percorrer toda a lista até encontrar o id procurado, para então remover esse elemento, segue um exemplo <div id="app"> <div v-for="(item, index) in lista" ...
JrD's user avatar
  • 1.329
4 votos
Aceito

Converter strings em CamelCase para kebab-case

Creio que o que queres é converter strings em CamelCase para kebab-case, podes fazer isso assim: function camelCaseToKebabCase(str) { return str.replace(/([a-zA-Z])(?=[A-Z])/g, '$1-')....
Sergio's user avatar
  • 135mil
4 votos
Aceito

Vue 2: Pegar valor do input sem usar v-model

Não recomendo de forma alguma essa mesclagem de php puro com vue, existem soluções melhores, mas é possível pegar o value pelo event.target.value, exemplo... new Vue({ el: '#app', data : { ...
Felipe Duarte's user avatar
3 votos
Aceito

Como desabilitar um link de forma condicional com bind href no vue.js?

Você pode usar condições dentro do bind. Ex: (condição ? if : else) No seu caso ficaria assim: <a v-bind:href="(opts.level >= 2 ? 'http://meusite.com.br/' + opts.cod : '#')"> Coloquei >= 2 ...
Fernando VR's user avatar
3 votos
Aceito

Não é possível utilizar diretiva v-for sobre prop passada ao componente do Vue

Você esta tendo problemas para renderizar pois esta usando DOM Template, de uma olhada na documentação sobre as particularidades de DOM Templates. Basicamente, você precisa usar o atributo is. Como &...
Giovane's user avatar
  • 2.059
3 votos
Aceito

Limpar dados do v-model do VUE de uma só vez

Você terá que limpar um por um, mas uma opção é colocar os atributos do form dentro de objeto separado no data. Assim, você acessa eles por this.fields.campo1 etc.., e pode iterar o objeto limpando ...
Andre Figueiredo's user avatar
3 votos

Gerar quebra de linha no VueJS com v-if

Vejo duas soluções práticas para seu problema: 1. Solução mediana Criar uma computed property que forneça um array de arrays, onde cada array "filho" tenha 3 elementos apenas. Ex.: new ...
fernandosavio's user avatar
3 votos
Aceito

Diferença entre props e propsData

Ambos são a mesma coisa mas em fazes diferentes da vida do componente. Quando defines o componente ele precisa de ter algumas das propriedades estruturais de um componente Vue, como props, data, ...
Sergio's user avatar
  • 135mil
3 votos

Diretivas Personalizadas

Edit01 Se entendi certo oque você precisa, temos isso na documentação do VueJs https://br.vuejs.org/v2/guide/custom-directive.html Seria algo como isso: <div v-arthur="{ color: 'green', text: '...
Dup's user avatar
  • 164
3 votos
Aceito

Falha ao remover elemento array

Você pode utilizar o array.filter() para trazer apenas as sugestões com meu_voto === 'S': this.meusVotos = this.sugestoesGeral.filter(sugestao => sugestao.meu_voto === 'S') Documentação do array....
Marcelo The Mage Coder's user avatar
3 votos
Aceito

Reatividade de Objectos no VueJS (vuex)

Eu passei por problemas assim também, eu não sei exatamente dizer porque isso aocntece mas o vuex tem um problema com reactividade quando é feito de forma aninhada, no caso você está atualizando a ...
Guto's user avatar
  • 730
2 votos

Dificuldade para remover item de uma lista invertida no Vue

Olá As mudanças que eu faria no código seriam adição de propriedade key no html e utilizar próprio item como referencia para remoção: <!DOCTYPE html> <html> <head> <meta ...
Jozimar Back's user avatar
2 votos

Performance tipos de EventBus em Vuejs

Como o EventBus opera? Comunicação entre componentes Toda e qualquer comunicação entre componentes está disponível na instância do Vue e você pode encontra-los dando um console.log(this) dentro do ...
Felipe Duarte's user avatar
2 votos
Aceito

Como usar variaveis dinamicamente no vue

Para atingir exatamente o resultado que você deseja, mediante ao código, faltou apenas você colocar o :class ou v-bind:class que funcionará. Segue abaixo: <div v-for="(value, propertyName) in user"...
guastallaigor's user avatar
2 votos

Como fazer debounce (consultar apenas depois de terminar de digitar no input) no VUEJS?

Resolvi publicar uma resposta para registrar a forma que resolvi o problema. Eu utilizei uma técnica de debounce para Javascript, baseando-se num setTimeout. Veja: new Vue({ el: '#app', ...
Wallace Vizerra's user avatar
2 votos

Como fazer debounce (consultar apenas depois de terminar de digitar no input) no VUEJS?

Você pode fazer isso usando o vue-rx que integra o rxjs ao ciclo de vida dos componentes Vue. Veja um exemplo funcionando: https://codesandbox.io/s/k011nv98kr Código fonte do exemplo: main.js ...
Giovane's user avatar
  • 2.059
2 votos
Aceito

Como filtrar uma lista em vue com resposta ignorando acentos e maiúsculo/minúsculo?

Fiz uma junção dessa resposta Como fazer uma busca ignorando acentuação em JavaScript?, para normalizar os texto acentuados (removendo os acentos) e também colocando os valores todos em caixa baixa, e ...
novic's user avatar
  • 36,7mil
2 votos

Erro ao passar props com objetos literais via v-bind="object"

Ao dar o v-bind você deve apontar a prop que deseja atribuir, e na interpolação usar a prop como objeto... const blogPost = { props: ['post'], template: '\ <div>\ <...
Felipe Duarte's user avatar
2 votos
Aceito

Problemas ao usar o v-mask (Vue.JS)

Você está tentando usar a diretiva do v-mask mas está importando o plugin e não a diretiva. Aqui está um exemplo funcionando: main.js import { VueMaskDirective } from "v-mask"; Vue.directive("mask",...
waghcwb's user avatar
  • 1.951
2 votos
Aceito

Como usar mais de 1 classe dinamica com vuejs?

Cria uma computed property que faça essa lógica. Na API do Vue podes retornar uma array com strings e objetos (parecido com o que estás a fazer no template), e ficaria assim: No template: <div :...
Sergio's user avatar
  • 135mil
2 votos
Aceito

V-FOR não está funcionando no meu APP?

Problema solucionado inserindo uma div pai com a class="row" dentro do componente. No arquivo index.html <div class="container"> <div id="app"> <router-view></...
WMomesso's user avatar
  • 2.479
2 votos
Aceito

Inserir valor de Input como uma Option de um Select

Vou me focar na parte de adicionar um item na lista para que o seu select seja atualizado com o novo valor, ou seja, a sua lista que carrega o select a partir do momento da sua atualização ...
novic's user avatar
  • 36,7mil
1 voto
Aceito

Classes, Mixins ou os Dois?

Não vejo muito a vantagem de se usar uma classe só com getters e setters, mas vejo vantagem em usar os serviços, uma abordagem que ajudou a clarear mais as ideias com relação a isso foram esses dois ...
Iago Cavalcante's user avatar
1 voto
Aceito

Acesso a valor de propriedade

mesas deve ser um array, não pode usar idMesa de forma repetida as chaves deve ser única em cada objecto Forma errada mesas={ idMesa:{}, //está repetir a chave idMesa:{} } ...
Jorge Costa's user avatar
  • 1.436
1 voto

Como fazer o "bind" de uma variável do Vue.js sem usar as chaves

Opa, fuçando na net esbarrei logo após inserir a questão aqui. A solução é a diretiva v-text como mostra nesse link ficando assim meu html: <form id="foo" v-on:submit.prevent> <div> ...
Leandro Santiago Gomes's user avatar
1 voto
Aceito

Inserir component depois da renderização Vue.js

O VueJS possui um ciclo de vida próprio. https://br.vuejs.org/v2/guide/instance.html na própria documentação ele explica os métodos que controlam esse ciclo de vida. Ao invés de usar o Jquery, o ...
Pedro Pequeno's user avatar
1 voto
Aceito

VueJS2 Atualização de Diretivas

tente setar o valor à ser formatado como valor da diretiva. var intl = new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }) Vue.directive('money', { bind: function (el, ...
Tobias Mesquita's user avatar
  • 23,1mil
1 voto
Aceito

Performance tipos de EventBus em Vuejs

Quanto ao mecanismo do EventBus, em ambos os casos eles são iguais, o que muda é a forma de que como se acessa o mesmo. O segundo caso, o que é definido um plugin que irá injetar à $bus ao prototype ...
Tobias Mesquita's user avatar
  • 23,1mil

Only top scored, non community-wiki answers of a minimum length are eligible