Skip to content
Fix Code Error

Tag: vue.js

Vue/Vue Router Scoped CSS Not Clearing on Navigation

July 18, 2021 by Code Error

Posted By: Anonymous I’ve not been able to find any thing about this issue so far, hopefully it’s something simple that someone here has come across before. The code and example below have been simplified for brevity. I’m using Vue V3 with Vue CLI for running it locally. I have two views which have an …

Continue Reading

Why does vue throws an error at myMap.delete (mapKey)?

July 18, 2021 by Code Error

Posted By: Anonymous I want to click on the element to delete the element from the map for this I want to use .delete (mapKey) _x000D_ _x000D_ <template> <div> <div v-for=”mapKey of messages.keys()” :key=”mapKey”> <div @click=”messages.delete(mapKey)”></div> </div> </div> </template> <script> export default { name: “HelloWorld”, data() { return { messages: new Map(), }; }, }; …

Continue Reading

How to get data’s property value after axios.get call?

July 18, 2021 by Code Error

Posted By: Anonymous It’s Vue.js app and the code looks as following: getQrCodeUrl(paymentId) { this.$axios.get(`${this.$config.server}/api/crm/payments/qr/${paymentId}/url`) .then(responseUrl => { console.log(‘responseUrl.data =’, responseUrl.data) console.log(‘responseUrl.data.url =’, responseUrl.data.url) }) .catch(error => { … }) }, I’ve got responseUrl.data, but responseUrl.data.url is undefined as in the screenshot below: Solution The screenshot shows you that responseUrl is an object with result …

Continue Reading

How to pass translated text to data in vue js

July 18, 2021 by Code Error

Posted By: Anonymous I am currently using vuei8n for translation. Gotta admit I find the docs a bit difficult to understand. I currently have this component called Forex.vue <i18n> { "en": { "title": "What is Forex ? ", }, "zh": { "title": "什么是外汇?" } } </i18n> <template> <div> {{$t(‘title’)}}</div> //this works </template> But What I …

Continue Reading

How to make dynamic images appear in vue with vuejs?

July 17, 2021 by Code Error

Posted By: Anonymous I have created a db where all the games are stored. In the js part I’m sending a request for getting all games, then putting the result into games[] list. When I’m trying to assign the images that are stored in db, in js games[index][‘cover_img’], they are not showing. <div class="all_games"> <div …

Continue Reading

ais-refinement-list in VueInstantSearch(Algolia) doesn’t renders list

July 17, 2021 by Code Error

Posted By: Anonymous I have stucked with an issue using refinement list widget of algolia. First of all my resulting data structure is like that: [ { objectID: 999, title: ‘some title’, categories: [ { id: 444, name: ‘some name’, }, {…}, ] } ] I have that type of structure on my page: <ais-instant-search …

Continue Reading

how to enter a dot “.” in a price input field manually

July 17, 2021 by Code Error

Posted By: Anonymous Here I have written a vue.js watcher. Where if user enters a number in price input field after entering a specific number, comma "," will prompt dynamically using watcher. So here i am unable to enter a dot "." manually I want to enter a "." in this price field how can …

Continue Reading

Vue js | How to access a field :type attribute in script tags

July 17, 2021 by Code Error

Posted By: Anonymous <div class="row"> <ValidationProvider v-slot="{errors, valid}" rules="required" class="col-md-6"> <b-field :label="$t(‘admin_global_username’)" :type="{‘is-success’:valid, ‘is-danger’: errors[0]}" :message="errors && $t(errors[0])"> <b-input v-model="employeeModal.modalData.username" type="text" /> </b-field> </ValidationProvider> </div> I am using Vee-validate and i want this : İf b-field :type in is-danger mode. user can’t go other page. how can i know what is the type in script …

Continue Reading

How to set formData for boolean in Axios post request

July 17, 2021 by Code Error

Posted By: Anonymous I’m trying send a post request using axios to my backend but I can’t send the boolean "isActive" for some reason. Is there a way to do this? async submit() { const isValid = await this.$validator.validateAll() if (isValid && !this.submitting) { let formData = new FormData(); formData.set("city", this.formData.city) formData.set("state", this.formData.state) formData.set("county", this.formData.county) …

Continue Reading

How to fix Vue packages version mismatch from vue-loader?

July 17, 2021 by Code Error

Posted By: Anonymous I am trying to install the Vue Filemanager to my package.json. However, when I try to install the package using npm install and npm run dev I get this error: ERROR in ./resources/assets/js/file-manager/FileManager.vue Module Error (from ./node_modules/vue-loader/lib/index.js): Vue packages version mismatch: – [email protected] (/var/www/node_modules/vue/dist/vue.runtime.common.js) – [email protected] (/var/www/node_modules/vue-template-compiler/package.json) This may cause things to …

Continue Reading

Vue: Why only the last object is only associated to every modal which is in for loop

July 17, 2021 by Code Error

Posted By: Anonymous This is the first time I am using modal component. Inside a for loop of an array of objects, I also added a modal component, "Add Item". The v:onClick="showSectionID" function in the SHOW button within the modal should just consolelog the id of the object who’s associated modal was opened and click …

Continue Reading

How to access prop by property name from in vuejs

July 16, 2021 by Code Error

Posted By: Anonymous I want to access the error message returned from my api if error exists for its corresponding input field. With what I have tried, all errors returned from the api shows below all input fields as in the image below. Below are the parent and child vue components. InputField.vue <template> <div class="form-group …

Continue Reading

Vue custom webpack css does not take effect, but it is normal in the vuecli project

July 16, 2021 by Code Error

Posted By: Anonymous My same css is used normally in a vuecli project, and the error report in a custom webpack project has no effect. What should I do? Solution It looks like your CSS loader doesn’t support the space-separated syntax of rgb() (introduced in CSS Colors Level 4). As a workaround, switch to the …

Continue Reading

VueJs changing text-animation does not work on iOS devices

July 16, 2021 by Code Error

Posted By: Anonymous I have an animation that is supposed to change the text infinitely and runs for 7 seconds, the issue is it doesn’t work on iOS devices. <template> <div class="J-container"> <p>Discover your next location for your <span class="changetext"></span></p> </div> </template> <script> export default { } </script> <style scoped> .J-container p { font-size: 2.7rem; …

Continue Reading

How to update Vue-Devtools props in Chrome while doing async promise functions

July 16, 2021 by Code Error

Posted By: Anonymous When I am mutating a prop in Vue 3, which is an object (I know, don’t mutate props directly, here it only works because it’s passed by reference because it’s an object), it updates also in the Vue Dev-Tools which is great. If I send some multiple axios calls, where I resolve …

Continue Reading

Vuejs: Router links not correct after passing params

July 16, 2021 by Code Error

Posted By: Anonymous router links are all working until I pass params to a component. The component loads correctly using the params but after that when I want to navigate to another link the route doesn’t change back correctly. For example: I go to /error/123 and after that to /info -> what I get is …

Continue Reading

Vue: Embed child element in a parent element that is marked with the v-html directive

July 16, 2021 by Code Error

Posted By: Anonymous I want to embed/place a child element inside a parent element that is marked with the v-html directive. This is what I have now and it’s clearly incorrect: <span v-for="(word, index) in words" :key="index" v-html="word"> <span>test</span> </span> <span>test</span> is NOT being rendered to the DOM. How can this be achieved? Solution The …

Continue Reading

Vuex + vue not reactive when using dictionary as state object

July 15, 2021 by Code Error

Posted By: Anonymous I need to use dictionary as one of my store variables, but It’s not reactive like array, what is the best practice to solve this? I’ve created minimal example: https://codesandbox.io/s/vuex-store-forked-ko3md?file=/src/App.vue Solution In order to add new reactive props, instead of using direct assignment, you should use the Vue.set() method: ADD_ITEM(state, { key, …

Continue Reading

Vuetify v-simple-table loading state

July 15, 2021 by Code Error

Posted By: Anonymous I’m trying to show loading state in v-simple-data, but for some reason, it doesn’t work, maybe there is another way to do it? Here is my code: https://codesandbox.io/s/vuetify-template-forked-bmobx?file=/src/App.vue Solution You are resetting the dataLoading variable outside of the timeout. Therefore it is immediately set to false. You should move it inside the …

Continue Reading

How can we add before after css code dynamically with vue?

July 15, 2021 by Code Error

Posted By: Anonymous I am trying to solve a problem which I actually never faced. I am trying apply dynamic color from my data inside v-for loop. Now normal css properties are easily appliable. I need to apply css for after. I tried <div class="_tmln_shdl_crd_itm" v-for="(t, i) in timeLine" v-if="timeLine.length"> <div class="_tmln_shdl_itm_lft"> <p :style="`color:${t.color}`">{{t.time}}</p> // …

Continue Reading

Using Nipplejs in Vue with Quasar

July 15, 2021 by Code Error

Posted By: Anonymous i am trying to use Nipplejs in my Vue Project with quasar Components. I installed nipplejs by npm install nipplejs –save. I tried to integrate the nipple with the following code: <template> <div id="joystick_zone"></div> </template> <script lang= "ts"> // Imports import Vue from "vue"; import nipplejs from ‘nipplejs’; export default Vue.extend({ async …

Continue Reading

OnChange page rows using VueJS and axiosJS not working

July 15, 2021 by Code Error

Posted By: Anonymous Context: Implementing Page Rows using VueJS and AxiosJS to allow users to select the number of rows to display on a table. Problem: When selecting onChange from the dropDown box, the table rows do not change, whereas the console.log shows the correct number of records and data. Ask: I need help to …

Continue Reading

this.$state.commit loses value after page refresh

July 15, 2021 by Code Error

Posted By: Anonymous I have this code: beforeCreate() { // Hide merchant switcher on this page this.$store.commit(‘SET_SHOW_MERCHANT_SWITCHER’, false); }, This hides switcher on page, if set false. But after page refresh switcher comes back. So, I guess, this value becomes true. Is there a way to prevent this? Solution The only way not to lose …

Continue Reading

VueJS extend component for customization

July 14, 2021 by Code Error

Posted By: Anonymous Is there any way to use some Generic component and keep it’s props emitters etc and just customize it? Example: <template> <GenericComponent color="black"> Something in the default slot </GenericComponent> </template> <script> import GenericComponent from ‘GenericComponent’ export default { name: ‘MyCustomizedComponent’ props: // to take same props as GenericComponent and pass it to …

Continue Reading

problem in Laravel And Vuejs , Deploy To Heroku

July 14, 2021 by Code Error

Posted By: Anonymous welcome. I made an experiment project to check (laravel-with-vue) and uploaded it to Heroku. But the screen appears blank and when checking the item it appears: <body data-new-gr-c-s-check-loaded="14.1012.0" data-gr-ext-installed="" cz-shortcut-listen="true"> <div id="app"> <app></app> </div> <!– Scripts –> <script src="http://blogy-new.herokuapp.com/js/app.js"></script> </body> And this website for more details: https://blogy-new.herokuapp.com/ But on localhost it works …

Continue Reading

why prop value is changing with data changes in vuejs3?

July 14, 2021 by Code Error

Posted By: Anonymous props that I’m getting props : { images : Object, locale : String, }, data method data() { return { form : this.$inertia.form({ product_images : this.images.data, }), } }, I’m updating project_images on click event like so Add() { this.form.product_images.push({image : null}); }, but here problem is that as project_images updated with …

Continue Reading

How can I Reset an a-select Ant Design Vue?

July 14, 2021 by Code Error

Posted By: Anonymous I’m trying to reset the box of my a-select when i’m doing an event in a function. Basically i have my a-select <a-select style="marginTop: 8px;width: 20%" @change="onChanged" > <a-select-option v-for="test in tests" v-bind:key="test.id" :value="test.id" > {{ test.testName }} </a-select-option> </a-select> And i want to reset with a particular event and show nothing …

Continue Reading

Including a standalone component in vue ant design steps

July 14, 2021 by Code Error

Posted By: Anonymous I want to use any design steps component and i wonder how i can include a standalone component from https://www.antdv.com/components/steps/ <template> <div> <a-steps :current="current"> <a-step v-for="item in steps" :key="item.title" :title="item.title" /> </a-steps> <div class="steps-content"> {{ steps[current].content }} </div> <div class="steps-action"> <a-button v-if="current < steps.length – 1" type="primary" @click="next"> Next </a-button> <a-button v-if="current …

Continue Reading

“TypeError: chart_js__WEBPACK_IMPORTED_MODULE_9__.default is not a constructor”

July 14, 2021 by Code Error

Posted By: Anonymous I’m attempting to use Chart.js v3.3.2 in a Vue component (by itself, since I need to use a plugin that requires v3), and I’m following the directions and a blog post , but I’m getting the following error: Error in mounted hook: "TypeError: chart_js__WEBPACK_IMPORTED_MODULE_9__.default is not a constructor" The relevant code (just …

Continue Reading

Arithmetic inside vue js expressions

July 14, 2021 by Code Error

Posted By: Anonymous I have some html code and i am displaying some value like this <h4 class="text-dark pull-right"> <strong>USD {{item.addbedrooms[0].the_price_per_night }}</strong> </h4> I got the displayed value from a web service that only allows one to display the data like above. Is there a way i can do some arithmetic on the expression like …

Continue Reading

Posts navigation

  • 1
  • 2
  • 3
  • 4
  • …
  • 274
  • Next

.net ajax android angular arrays aurelia backbone.js bash c++ css dataframe ember-data ember.js excel git html ios java javascript jquery json laravel linux list mysql next.js node.js pandas php polymer polymer-1.0 python python-3.x r reactjs regex sql sql-server string svelte typescript vue-component vue.js vuejs2 vuetify.js

  • you shouldn’t need to use z-index
  • No column in target database, but getting “The schema update is terminating because data loss might occur”
  • Angular – expected call-signature: ‘changePassword’ to have a typedeftslint(typedef)
  • trying to implement NativeAdFactory imports deprecated method by default in flutter java project
  • What should I use to get an attribute out of my foreign table in Laravel?
© 2022 Fix Code Error