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 …
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(), }; }, }; …
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 …
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 …
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 …
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 …
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 …
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 …
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) …
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 …
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 …
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 …
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 …
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; …
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 …
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 …
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 …
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, …
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 …
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> // …
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 …
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 …
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 …
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 …
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 …
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 …
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 …
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 …
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 …
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 …
