Questions tagged [vue-component]
Component in Vue is a robust tool that enables the enhancement of fundamental HTML elements for the purpose of encapsulating reusable code.
Description I am looking to create a table component with checkboxes, but I am facing an issue. Whenever I click on a checkbox, the click event is also triggered for the table row and cell containing the checkbox, which is not what I want. I have tried us ...
I have been working on creating a Vue data table component, and my goal is to allow for editable columns based on an array of column names provided. I found inspiration in this example, where values in specified columns are editable. In order to achieve th ...
I'm currently working on developing a single-page application and I've been exploring Vue Router for this project. However, I seem to be facing some issues with my code as I can't seem to view the page where the app should run. After integrating Vue Router ...
Here is a paragraph about the list of child components: <question-list-item v-for="(item, index) in questionListParsed" :key="item.id" :both-question="item" :class-id="classId" ...
Currently, I've integrated the vue-flickity package by MetaFizzy's Flickity into my Vue application. Upon navigating away from a route containing a vue-flickity slider instance, there is a brief flash of unstyled slides visible in the document wh ...
My current challenge is getting my App to render on a new page instead of the same page. Despite trying render: h => h(App), it still renders on the same page. This is the Vue file (Risks.vue) where the router will be linked: <router-link to="/risk ...
Seeking guidance on how to handle URL Encoded format in postman to send data to my Vue JS app. Using the encoded format shown below, what npm package should I utilize for this task? https://i.stack.imgur.com/sBkXi.png ...
I am currently working on a project where I need to check which checkboxes are ticked in different categories so that I can display the total number of checked items next to each category name. I have come up with a code that loops through the selected ite ...
Currently facing a challenge while developing a web page using Vue, specifically with parsing and rendering the child components inside the <slot>. I need to extract the slot content, convert it into an array of components, and display these compo ...
Code: <!DOCTYPE html> <html> <head> <title>Creating a Vue app</title> <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3046455570021e061e0100">[ ...
One of the requirements states that all HTML elements must be defined in a JSON file and utilized within the template. In order to meet this requirement, there is a function called "markComplete" that should be triggered whenever a checkbox is changed. S ...
For my component, I am in need of multiple empty arrays and predefined objects. The data object structure provided below seems to be effective for my purpose. However, I am uncertain if this is the optimal pattern and whether it might lead to unforeseen co ...
How can I splice the array from the fields in HTML Vue JS if the status is true? I also need to pass the index value to a function. Is this possible? The error I am encountering is: Uncaught ReferenceError: index is not defined at Object.success (80 ...
Is there a way to pass data from the request through axios in the root component to the child using Vue? Currently, only the "title" field is displayed correctly, but I also need to output the "body". Note: This is my first time working with Vue and I&apo ...
I'm currently working on incorporating a v-data-table in a v-dialog <v-dialog max-width = '600px' v-model = 'dialog'> <v-card> <v-card-title> <span class = "headline"> Reconstructor </span> ...
My maps component initializes a Google map, adds markers based on props passed from the parent, and sets the correct bounds of the map. However, the markers are added through a computed property to make it reactive. Everything seems to be working fine, exc ...
I am facing a dilemma in my Vue 2.0 .vue component file where I have two different 'conditions' that dictate when certain data should be shown to the user. I currently have a button that allows toggling between these conditions. <tr v-show="showMonth" ...
I'm facing an issue where a Vue 2 component fails to render upon updating its data: Vue.component('image-slider', { data: function() { return { name : "Image1", src : "https://via.placeholder.com/250" } }, ...
This is how my Vue component looks: <template> <select class="form-control" v-model="selected" required @change="changeLocation"> <option v-for="option in options" v-bind:value="option.id" >{{ option.name }}</option>&bs ...
Looking to incorporate the following template into my component's render function, but struggling with how to do so. This is the current template structure: <template> <div> <slot name="item" v-for="item in filteredIt ...
My view is always changing: <div id="myview"> <div :is="currentComponent"></div> </div> I have linked it to a Vue instance: new Vue ({ data: function () { return { currentComponent: 'myComponent', } }, }).$mo ...
Check out this Vue component template (View it on CODEPEN): <div class="some-class"> <v-form > <v-container @click="someMethod()"> <v-row> <v-col cols="3" sm="3" v-for="p in placeholders" ...
Before, my Vue.js app worked flawlessly until I tried putting it into a Vue component. It started throwing the following error: [Vue warn]: Error compiling template. Here's the code for the component (components.php): <script> Vue.component(&ap ...
Need help with sharing data between two components? Here's the code for the first component: <template> <div class="row"> <label id="chatRoom">{{chatRoom}} <input type="text" id="chatInput" v-model="chatRoomVal"></label&g ...
After saving my JSON data in a JS file for Vue, I encountered an issue with accessing it and getting my HTML v-for condition to work properly. The method described in the Vue.js documentation didn't help me fetch and execute the JSON data. Could someone pl ...
Is there a way to suppress the default Vue warning [Vue-warn] when displaying a custom validator message on a prop? I am currently seeing both the custom error message and the Vue warning. This is what my prop looks like: props: { mode: String, defaul ...
I've been facing a challenge in rendering multiple components using <component v-bind:is="..."> within a v-for loop. The rendering part works fine, but now I need to incorporate v-model within the loop. This is my current setup - an array ...
When developing my app, I encounter the need to dynamically add components to the DOM after fetching data from an API. Specifically, I have a Carousel component and a Home component in my project. However, since I am uncertain about the number of carouse ...
My form is designed to fetch questions from an API, and I am looking to collect answers in separate input fields for each question. To achieve this, I have set up a response array with a length greater than or equal to the number of questions, pre-filling ...
In my Vue.js application, there is a table that lists both a URL and an Id. The URL is user-defined, so I implemented an input component with a text input field to display the URL value and pass the Id as a parameter. The v-model of this component is an ar ...
On the filter page, there is a functionality to toggle between different content options. | Filter | | content | Initially, the content displayed is in Ruby. When a filter is selected, the Ruby template should be hidden and replaced with content fetched ...
I am currently developing a blog application that utilizes Vue.js for the frontend and Node.js for the backend. For the content creation part of the blog, I have implemented a rich text editor called vue2-editor on the frontend. The goal is to store this ...
In simplifying the component I aim to create, I have created the following code structure: // MyComp.vue <script setup lang="ts"> import { PropType, defineProps, defineEmits } from 'vue'; const props = defineProps({ modelVal ...
I am currently working on a new vuejs 2 app and encountered an unexpected error. ERROR in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache!./src/components/Customers.vue Module build failed: S ...
My background includes working with both single-page apps and multi-page apps (traditional websites). Previously, I have utilized AngularJS 1.x on each page, which allowed me to keep all components in separate files and run them as needed on different page ...
I am in the process of transitioning my code to Vue.js, so I am relatively new to Vue. In the screenshot provided (linked below), you can see that there are 4 columns inside a div with the class name columns. I attempted to use the index, like v-if='i ...
I am currently utilizing Vue-draggable-next in conjunction with Vue 3 to enable draggable lists within my application. In certain scenarios, users need to drag items from other lists into lists that are initially empty. I have noticed that the area for det ...
Below is the main file path /main.js import Vue from 'vue'; import App from './App.vue'; import vuetify from './plugins/vuetify'; import router from './router'; import store from './store/index.js'; Vue.config.productionTip = false new Vue({ router, ...
In my application, I'm implementing Vue refs to enable selecting and copying text when a button is clicked. The code structure looks something like this: //In template <input type="text" ref="url" value="my url"/> <button @click="copylink">Cop ...
I'm struggling to develop a typescript vue component with some methods. Here is the script snippet. <script lang="ts"> import Vue from 'vue'; export default Vue.extend({ methods: { check(value: number) { console.log(value) }, }, ...
Currently, I am attempting to make a GET request using axios to an API that requires an Authorization header. Below is the code I am currently working with: My Code: data () { return { listings: [], AuthStr : 'Bearer ' + JSON.pa ...
I'm currently working on developing a custom component. And I have an idea of how I want to use it: let app = new Vue({ el:'#app', template:` <tab> <tab-item name='1'> <h1> This is tab item 1</h1> </tab-i ...
Currently experimenting with Vue.js and integrating a 3rd party API. Successfully fetched the JSON data and displayed it on my html, but encountering issues with missing images. As some images are absent from the JSON file, I've saved them locally on my la ...
How can I effectively utilize the data fetched using the Vuex store's action in a specific component? import axios from 'axios' export default { namespaced: true, state: { items: [] }, actions: { fetchCategories ({state, commit}) { ...
Is there a way to import Cal-HeatMap (https://www.npmjs.com/package/cal-heatmap) into my project after saving it with npm install? This is the method I attempted: <script> import calHeatmap from 'cal-heatmap' export default { na ...
When a specific icon is clicked, an API call is triggered: <i class="fas fa-sync" @click.prevent="updateCart(item.id, item.amount)"></i> I am looking to add an animation to rotate the icon until the API call is complete or ...
I'm currently working on creating a menu that navigates between categories. When a category has a sub-category, it should return a boolean value indicating whether it has a sub-category or not. <template> <select><slot></slot ...
I am struggling to respond to an action emitted by a child component. The child triggers an event/action called init. I try to listen for this event in the parent component's events mapping. However, the callback function never executes, leading me to beli ...
With my Vue component set up like this: <template> ... <td>{{getDate(item.created_at)}}</td> ... </template> <script> export default { ... methods: { getDate(datetime) { ...
Hello, I am new to the world of web development and I'm currently learning vue.js. I am working on an app where I input an ID and upon clicking the search button, a method is called. This method utilizes axios to make a request to the controller and fetch ...
I am facing a situation where I have a component that is mounted as part of the DOM rendering process. The basic structure of the application looks like this: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title ...
I am currently working on a Vue project and encountered an issue after running npm run serve. The error message I received is as follows: 66% building 670/715 modules 45 active /Users/bytedance/go/src/code.byted.org/ad/omega_fe/node_modules/echarts/lib/cha ...
In my Vue.js 2.3 project, I am dynamically rendering a list of components using <component v-for="..."> tags. The structure of my template is as follows: <some-component v-for="{name, props}, index in modules" :key="index"> <component ...
Is there a way to dynamically import a vue component based on a path provided in the URL parameters? For example, if <host>/<path> is entered into the browser, I would like to load a vue component located at <path>.vue. In my routes.js f ...
Can someone help me with using itemList in a template? The itemlist is a static list, but I am unsure of where to declare it and how to export it to the template. <template> <table class="table table is-striped is-narrow is-fullwidth" ...
My goal is to implement validation in my Vuetify form, using data from my Model or Controller, and display an alert message. Here is a snippet from my .vue file: <v-row dense> <v-col cols="3"> <v-text-field dense outli ...
1. I am looking for a way to set a default value for a component prop in Vue 2. Take, for example, a basic movies component that can be utilized like this: <movies year="2016"><movies> Vue.component('movies', { props: ['year'], templa ...
I'm facing an issue assigning a string value to a variable depending on a boolean variable. After trying the following code: [Vue warn]: Error in data(): "TypeError: Cannot read property 'check' of undefined" TypeError: Cannot read proper ...
Just starting out with Vue and experimenting with vue-router, I'm trying my hand at dynamically loading components without relying on additional libraries like webpack. So far, I've set up an index page and a router. Upon initial page load, I not ...
Currently, I am working on a front-end project using [THIS VUE TEMPLATE][https://www.creative-tim.com/product/vue-material-dashboard-pro] The issue I am facing involves trying to register a component locally and encountering the following error: "1 ...
Is it possible to maintain separate HTML, JS, and CSS files while creating Vue.js components? I recently read the "Why Vue.js doesn't support templateURL" article which discusses this topic. "Proper modularization is a necessity if you want to build a ...
Here is some HTML code using Vue syntax: <select id='select-id' > <option selected disabled value=''>Select Option</option> <option v-for="(value, key) in object">{{ key }} - {{ value}}</option> </s ...
I have a parent component with an array that I display in the template. My goal is to click on a link that uses vue-router with a dynamic id attribute, and then open a new component displaying only the element of the array that corresponds to that id. Howe ...
Looking to send and display data from one child component to another within a main component in my Vue application. Any tips on how to effectively pass data between two child components? Example: I have Component A and Component B. Component B has a clic ...
I need to display various images depending on the card being loaded. <tr v-for="location in filteredLocation" v-bind:key="location"> <v-card class="mx-auto"> <v-img class="white--text align-end" height="200px" ...
Recently, I started on a fresh vue2 project with vuetify and added several components including a navbar. However, I encountered an issue where my icon appeared as italic texts. https://i.stack.imgur.com/WIrH0.png Despite checking the console and network ...
It seems like the issue lies in the timing rather than being related to asynchronous operations. I'm currently iterating through an object and displaying a list of items. One of the values requires calculation using a method. While the direct values on th ...
Just started learning Vue.js and I could use some guidance! I'm attempting to add a Search input for each column to filter results for the user This is the code in my HTML file: <div id="table" > <div class=" container ...
Extracting data from db.json in the Home.vue component and storing it in the jobs: [] array is a common practice. export default { name: 'Home', data() { return { jobs: [], } }, components: { }, mounted() { fetch("ht ...
Seeking a simple solution, all I need is to save data retrieved after an AJAX post in the Vue instance's data. See below for my code: const VMList = new Vue({ el: '#MODAL_USER_DATA', data: { user: []//, //userAcc: [] }, methods: { get ...
Currently experiencing an issue in Laravel where Vue components are displaying/updating locally but not on the server. Despite having all necessary packages of Vue and Node installed on the server, I can't seem to figure out what the problem is. Here ...
I have a set of data that returns labels, and I need to use this data to create a component. The component is already constructed when passing the values. Now, I aim to use a for loop to continuously add entries and generate components as required. This ...
I'm currently learning Vue and facing an issue with fetching data from an API to my component. I have a service class that successfully retrieves data from the API, as the API itself is working fine. Here's the code snippet: import IReview from & ...
I found my inspiration from the following sources: Below is how my vue component looks like: <template> ... <b-card-group deck v-for="row in formattedItems"> <b-card :title="item.title" img-src=" ...
While utilizing Vue3 with Element Plus to create a form, I encountered an issue with the resetFields() method not working as expected. The form is unable to automatically refresh itself. In the child component (Edit.vue): <template> <el-dialo ...