Questions tagged [vue.js]

0

votes
0

answer
19

Views

Stripe.js - cannot change background color or height of credit card input

I'm having an issue styling a Stripe credit card input in a Vue.js application. I'd like to change the background color to #f1f1f1 and the height to 60px, but I'm unable to do this either through the base styles or with css. What am I doing wrong? Ideally, I'd like to target it with css. Here's my c...
Lauren Mastroni
1

votes
1

answer
45

Views

Changing styles only when a Vue component is rendered

I'm currently using vue-router to send us to an about page like so: # @/views/About About Vue... [...] The way routes are rendered are like so: # @/App.vue import ... header { background: black; } Question: How would I go about changing the header background color ONLY when I am on the About.vue (if...
JohnCdf
1

votes
2

answer
87

Views

How to remove target attribute from a link vuejs?

I am using https://quilljs.com/ editor it adds the target attribute to all links. I want to remove it all dynamically. I am using it in the SPA so it's not good.
Amir Ur Rehman
1

votes
1

answer
35

Views

Axios AJAX call nulls parameter

I use Vuejs to create my frontend for my project. At the creation of one component ('TimeCapsy.vue'), I make an AJAX call to my backend like this: created: function () { if (verify.verify_login()) { let token = this.$cookies.get('jwt_us_cas'); let params = {'jwt': token}; console.log(params); axios(...
LLJ97
1

votes
1

answer
91

Views

Vue data not defined within component, however it is

I'm trying to do something very simple, however i'm having issues! I can see this being something simple I have over-looked however everything seems fine to me! So I have got a component m-input, at the moment all i'm doing is adding list items based on a data property value. Address @{{ i }} This i...
Martyn Ball
1

votes
1

answer
212

Views

Heroku deployment confusion: Vue.js frontend with Flask backend

I currently a web app involving a Vue.js frontend with a Flask backend acting as a REST API. They are divided into the client and server folders in my repo, respectively. I am looking to deploy it to Heroku via the Github deployment feature but am running into some errors and questions I need clarif...
user1713336
1

votes
1

answer
999

Views

How to Unit Test a Method in a Vue.js Component using jest

The crux of this problem for me was accessing a method that is within the component itself. The question here does not lay out how to access the method within the component. I have a Vue Component: file name: ThisVueFile.test.js Some other stuff is going on here import foo from 'bar' export default...
jeffcodes
1

votes
1

answer
105

Views

Vue.js select2 Wrapper Component change event

I'm using js select2 Wrapper Component. This is my code, Select one Select one Vue.component('select2', { props: ['options', 'value'], template: '#select2-template', mounted: function () { var vm = this $(this.$el) // init select2 .select2({data: this.options}) .val(this.value) .trigger('change') //...
vimuth
1

votes
1

answer
298

Views

Vue.js local template variables

I have a needed to create a local variable in my Vue template to shorten references to an otherwise long object $v.form.text, as shown in the example below: I would like to be able to access the $v.form.text nested object in my template as simply text. There is usually a lot more code than in the ex...
Paul Bastowski
1

votes
1

answer
75

Views

use vue-konva with a cdn and without a ES6 compiler

It´s posible to use vue-konva with a cdn and without a ES6 compiler, I try the next code, provided in this page https://konvajs.github.io/docs/vue/ // 3. Create the Vue instance new Vue({ el: '#app', data: { configKonva: { width: 200, height: 200 }, configCircle: { x: 100, y: 100, radius: 70, fill:...
Omar Sanchez
1

votes
1

answer
51

Views

Define vuejs component in blade

@extends('layouts.app') @section('body') @component('components.nav.main') @slot('menu') item0 item1 @endslot @endcomponent @endsection @section('script') const profile = new Vue({ el: '#app', data: { tab: 0 }, methods: { tabSelect(id) { profile.tab = id; } } }); @endsection I need this bunch of cod...
Kamran_dev
1

votes
1

answer
182

Views

nuxt.js - preload .woff fonts loaded as @font-face

Trying to improve my google score and google is telling me to use preload on the two custom fonts i'm using to save a whopping 4.5 seconds? currently the fonts are stored in assets/fonts and then being loaded as @font-face in typography.scss file when is then loaded in the nuxt.config.js file inside...
user10649239
1

votes
1

answer
124

Views

Issues including Moment.js library for use with Tabulator in Vue.js

I am trying to use the Date Time functionality with Tabulator which requires the moment.js library. In my application before adding Tabulator, moment.js was already being used in certain components that level. I have a new test component that uses Tabulator and attempts to use datetime. Typically I...
user3083872
0

votes
0

answer
3

Views

Would you process an image puzzle webapp on the server side or on the client side?

I am building a web app game which simply takes an image file as an input from the filesystem, divides the image into blocks, then puts the image blocks randomly so that the client-side user can relocate the blocks to restore the original image. The platform I will be using is Elixir/Phoenix languag...
Arto Kalishian
0

votes
0

answer
7

Views

How to use Laravel authentication and vue-router together

I'm new to Laravel and PHP in general, but familiar with Vue and SPA's. I know how to create authentication with Bcrypt, for example. However, I used Laravel to run php artisan make:auth and to create several different endpoints for the backend. I was trying to convert my app into a SPA using Vue,...
Jared Choate
1

votes
1

answer
101

Views

Vue CLI 3 prevent cache busting for certain output files

I'm building a chrome extension with vue cli 3. I've got the basics working well, but I was hoping to also run my content and background javascript through the build process instead of just putting them into my public folder and copying it into dist. This is mostly just so I can use import/export...
Will P.
1

votes
2

answer
153

Views

Vuetify breadcrumbs scoped slot

I'm trying to incorporate breadcrumbs into my vuetify app however this is my code: {{ breadcrumb.text }} And then I get this warning in the console. Im not really sure what it means.. default slot' is deprecated, use ':items and scoped slot 'item'' instead If i try the default template from vuetify...
Brad
1

votes
1

answer
76

Views

v-select on close event or remove validation error timer?

Final Edit/Solution: https://jsfiddle.net/up9xkhsm/1/ Is there such an event for v-select that I can key on when it is closed? Or some sort of a 'timer' I can set to remove validation errors after they occur? This is the v-select I am using: https://vuetifyjs.com/en/components/selects Edit: this out...
Matt Oestreich
1

votes
2

answer
112

Views

Axios config default GET param

I'm using Axios in my VueJS application and I want to add a default GET param in my request. I send my API-KEY through the URL ?api-key=secret and I don't want to specify this parameter each time. I see in the documentation that we can set Global custom defaults. With that we don't have to specify t...
John
1

votes
2

answer
40

Views

Why does clicking an accordion item open all items?

I tried to implement the below into my project. I double-checked and I cannot see any flaw in my implementation. Yet in my case, a click on one item opens all items of the accordion. Why? Below is my code. Markup: JS: methods: { toggle () { this.show = !this.show }, beforeEnter (el) { el.style.heigh...
drake035
1

votes
2

answer
39

Views

Setting a value to true for v-for generated radio buttons

The rows of a table are generated using a v-for loop over an array of objects in graphicState. I am trying to create a column of radio buttons. When a radio button is checked, this should set graphicState[index].selected to true. This post is interesting, but how can I use it set graphicState[index]...
Shane G
1

votes
1

answer
28

Views

“The specified key does not exist” for VueJS app deployed on deployed on S3 with CloudFront

I have deployed a VueJS app with S3 and CloudFront using Route53. It seemed like everything was working fine. I'm able to visit the site at https://my-domain.com, and I can navigate to different routes that I have set up with Vue router. However, when I try to access https://my-domain.com/about dire...
briancaffey
1

votes
1

answer
26

Views

How can I change the width of a Vue router-link?

I have the following code (IN VUE.JS): Link ⋮ #router-link{ border: 2px solid black; width: 100px; } The problem: Even thought I set the width to 100px, the router-link will not change its width-size. Can someone please help me understand why this is not working and is there a possible solution to...
August Jelemson
1

votes
1

answer
16

Views

Vue Axios API objects to array of objects

I'm currently having issues with displaying data of currencies on my website, where I want to display the short name for a currency, and the value of the currency. I'm using this api, with USD as the base: https://api.exchangeratesapi.io/latest?base=USD The code I have running and getting me the dat...
zetza h
1

votes
1

answer
25

Views

Vue-auth accessing $auth inside vuex actions

I'm using Vue-auth package for authentication of my vue-cli application. Everything is working fine but when I'm accessing this code in my vue actions it returns undefined. any idea? const AuthService = { test(data) { console.log(this.$auth) }, } Package: https://github.com/websanova/vue-auth
Kenneth
1

votes
1

answer
19

Views

Vue-Router: Nested routes not displaying

When using nested routes, the component does not display. If I do not use nested route, the component displays as expected. Any ideas on what I may be doing wrong with nested route? import ManufacturersReport from '@/components/ManufacturersReport'; import Reports from '@/components/Reports'; Vue.us...
Chris Smith
1

votes
1

answer
26

Views

Custom attribute name without value - Vue.js

I am using Bootstrap-Vue Accordions in my project, and I want to dynamically render a loop of accordions. The problem is that it has an attribute v-b-toggle.accordionName, which has no value (or this is what I think). I need to find a way to bind this attribute's 'name' dynamically. {{seminar.title}...
Ahmed Hammad
1

votes
1

answer
35

Views

Nativescript Vue TypeError: Cannot read property '0' of undefined

I have data from google_place_api, where the response data is json I have a problem with the application I'm working on, where errors occur when clicked or taped on photos (photos) not on google_place_api the following code that I made                                  ...
Jujur
1

votes
3

answer
38

Views

Next page does not open. Problem with pagination

I need to make a pagination in my task, but it is not working. I made two buttons to which I attached the 'click' event and I registered a property in the 'data'. When I click on the buttons, the property changes and is written to the link and in the same way changes the current 10 posts to the fol...
Andrey Belichenko
1

votes
2

answer
19

Views

RegEx - match substrings starting with a colon

I am struggling for hours now to find a working regex. I have this vue routes with dynamic segments and I need a regex to match those dynamic segments that starts with a colon. I know how to match substrings between two delimiters but this does not help when there is a substring to match at the end...
pixelmusic
1

votes
2

answer
24

Views

Vue: Passing multiple @click into components

I have a blade view template that I pass in a parent function like so: but now I need to pass another function in and tried this, but it doesn't work: How do I setup two event listeners for the same event?
jjoan
1

votes
2

answer
48

Views

Vue JS typescript component cannot find inject instance properties

I'm working with typescript and vue. In my app there is a service which is a global for every sub component. I found this native vue solution on vue JS to inject this property on the child components. on main.ts const service = new MyService(...); new Vue({ router, provide() { return { service }; }...
Daniel Santos
1

votes
2

answer
31

Views

Vuejs key in v-for loop with simple array

I want to build a dynamic form with list groups and user can add, remove and reorder them, with transition. But i dont know how to set key for each item inside v-for loop. As document say use object as key is bad idea, or use index as same as not use key at all. Could anyone show me a good solution...
noluck
1

votes
1

answer
37

Views

Vuex commit does not trigger v-show

I'm trying vuex for the first time, I found that a v-show directive is not been triggered after mutation commit on the store // store.js import Vue from 'vue' import Vuex from 'vuex' const states = { app: { init: 'APP_INIT' } } Vue.use(Vuex) const store = new Vuex.Store({ state: { appState: '' }, mu...
revy
1

votes
1

answer
26

Views

Simple Vue Axios example from docs, but using a component

This is probably a very silly question, but believe me I have tried hard to figure it out, to no avail. I have an appService.js file where I call an API like so: import axios from 'axios' axios.defaults.baseURL = 'https://www.alphavantage.co' const appService = { getPosts() { axios.get(`/query?funct...
user1525612
1

votes
1

answer
25

Views

VueJS: Property or method … is not defined on the instance but referenced during render

VueJS course Robot Builder: https://app.pluralsight.com/player?course=vuejs-fundamentals&author=jim-cooper&name=c8f8ef67-c67b-4a52-b109-9dbf2caae028&clip=3&mode=live My VueJS-RobotBuilder repo: https://github.com/leongaban/VueJS-RobotBuilder I'm currently doing a simple tutorial on VueJS, however ge...
Leon Gaban
1

votes
1

answer
30

Views

Why is Vue not initialized?

I have a Rails application. Sometimes on the pages I place Vue components. It can be as simple dynamic lists. But there can also be a more complex implementation with many components nested in each other. First, I'll show you how it all works (code). Part of the code from the main layer in a Rails a...
Colibri
1

votes
1

answer
23

Views

VueJS transition slider

I have a form with three steps. And each step should transition from side to side on click of prey/next. The problem is, that the transitions aren't being applied correctly after a direction change. Does anyone know why vue isn't adding the correct class to the displayed element after the change in...
Chris
1

votes
1

answer
65

Views

vuetify tabs component doesnt work correctly with flex animation

I'm trying to get the v-tabs to work with my expand menu. Basically when I click the toggle open, the right side menu will slide out, and inside this menu I want to use the tabs component from vuetify. It doesn't seem to work, when clicking on the tabs, it's jumping all over the places. It starts to...
stenwolf
1

votes
2

answer
27

Views

Why is my vuetify dialog hidden behind this evil overlay?

I have a vuetiful component which should just display a dialog. Unfortunately, an evil overlay has taken over the domverse. How do I overcome the forces of semi-transparent darkness? Vue.component('step-form', { data: function() { return { dialog: false } }, methods: { showDialog() { this.dialog=!th...
Marc

View additional questions