Bringing a module into Vue framework and transferring information

I'm currently working on a Nuxt project that includes a component.

The component can be found in components/Boxes.vue:

<template>
  <b-container>
    <b-row>
        <b-col v-for="box in boxes" v-bind:key="box">
          <b-card 
          :title="box.title"
          class="text-center mt-5">
            <p class="card-text">
              {{ box.text }}
            </p>
            <b-button
            variant="danger"
            >Find out more</b-button>
          </b-card>
        </b-col>
    </b-row>
  </b-container>
</template>

<script>
export default {
  name: "Boxes",
  data() {
    return {
    }
  }
}
</script>

Now, I want to use this component in my pages/index.vue file.

<template>
<div id="home">
  <b-container>
    <b-carousel 
      id="carousel1"
      class="mt-2"
      style="text-shadow: 1px 1px 2px #333;"
      controls
      indicators
      background="#ababab"
      :interval="4000"
      img-width="1024"
      img-height="480"
      v-model="slide"
      @sliding-start="onSlideStart"
      @sliding-end="onSlideEnd"
    >
      <b-carousel-slide img-src="./slides/slide1.jpg"></b-carousel-slide>
      <b-carousel-slide img-src="./slides/slide2.jpg"></b-carousel-slide>
      <b-carousel-slide img-src="./slides/slide3.jpg"></b-carousel-slide>
      <b-carousel-slide img-src="./slides/slide4.jpg"></b-carousel-slide>
    </b-carousel>
  </b-container>
  <Boxes/>
</div>
</template>

<script>
import Boxes from '@/components/Boxes.vue';

export default {
  components: {
    Boxes
  },
  data () {
    return {
      slide: 0,
      sliding: null,
      boxes: [
        {
          title: 'Fire Stopping',
          text: 'How does it work?'
        },
        {
          title: 'Our Services',
          text: 'Full range of firestopping'
        },
        {
          title: 'Bid Request',
          text: 'Inexpensive peace of mind'
        },
      ]
    }
  },
  methods: {
    onSlideStart (slide) {
      this.sliding = true
    },
    onSlideEnd (slide) {
      this.sliding = false
    }
  }
}
</script>

However, when trying to load the component in the index.vue file, it seems like it's not being imported properly.

You can see it in action here for better understanding: https://codesandbox.io/s/github/perfectimprints/precisionfirestopping.com.

Vue throws an error stating that the component is not defined, even though it's registered during rendering.

Answer №1

It's important to remember to pass the boxes props to your component:

    <Boxes :boxes="boxes" />

Within the component, ensure you have added props:['boxes'] like this:

   <script>
      export default {
        name: "Boxes",
        props:['boxes'],
        data() {}
       }
    </script>

Check out this example code

For more information on how to work with props and passing data from parent to child components, refer to documentation1 and documentation2

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can we effectively streamline these if statements for better organization and efficiency?

Currently, I am dealing with a straightforward if condition structure and aiming to keep the code as DRY (Don't Repeat Yourself) as possible. I believe that I have achieved optimal dryness for my specific situation by utilizing object keys as pointers ...

Executing a mutation upon mounting using React Apollo 2.1's Mutation component: A Step-by-Step Guide

Currently transitioning from Relay to React Apollo 2.1, and I've encountered a questionable situation. Situation: Certain components should only be displayed if the user is authenticated with an API key. To handle this, there's an Authenticator ...

Is it possible to retrieve several columns using the pluck method in Underscore.js following the input from the where method, similar to LINQ

var persons = [ {name : "Alice", location : "paris", amount : 5}, {name : "Bob", location : "tokyo", amount : 3}, {name : "Eve", location : "london", amount : 10} ]; var filteredResults=_.pluck(_.where(persons, {location : "paris"}), 'nam ...

Removing a value from an array contained within an object

I have a scenario in my task management application where I want to remove completed tasks from the MongoDB database when a logged-in user marks them as done. Below is the snippet of code for my Schema. const user = new mongoose.Schema({ username : Str ...

Error: Unable to access the 'clearAsyncValidators' property as it is undefined when running Jest tests on an Angular component

Encountering an Error While Testing Components with Jest Here is my code block for onClickLogin() method: onClickLogin() { if(this.loginForm.valid) { this.api.getLoginData().subscribe(res => { const user = res.find(a => { ...

The CSS transition fails to function correctly once a specific function is executed

When I hover over a div, the background color changes due to a transition effect. However, if I click on a button that triggers myFunction2 to change the background color of the div before hovering over it, the transition effect no longer works. functi ...

What is the process for saving selected values from a drop-down list into a database?

Hey there, I'm a newcomer to PHP and ajax. When choosing an option from the drop-down list, a separate div function should appear where I need to insert both the selected option and input data in different divs. Sorry for my poor English. Any help fro ...

Is it possible to extract an attribute value from a parent element using ReactJS?

https://i.stack.imgur.com/OXBB7.png Whenever I select a particular button, my goal is to capture the {country} prop that is linked to it. I attempted the following approach import React, { useState, useEffect } from 'react' import axios from &ap ...

Filtering out specific properties from an element within a JavaScript forEach loop

const findBloodType = bloodCodeArray.find(bloodCode => bloodCode.code.toUpperCase() === bloodType.toUpperCase()).code; In my Angular code, I am trying to retrieve just the 'code' property of the 'bloodCode' element using a callback ...

What is the best way to access the Node.js HelloWorld File that I created with a .js extension?

I am currently going through the materials at "NodeBeginner.org". Despite my limited experience with command line, I am struggling to execute my first file. The only success I've had so far is running "console.log('helloworld');" by typing ...

Tips on effectively utilizing a function within middleware in Node.js

I've successfully used the checkAuth function with this format: router.get('/login', checkAuth, function(){ }) Now I'm wondering how to utilize the checkAuth function with this format: routes file router.get('/login', con ...

After being deployed on Vercel, React is mistakenly redirecting to the incorrect file, although it functions properly when

I'm a beginner in JavaScript and I recently created a React project. Everything was working smoothly in local development until I deployed the project on Vercel. The issue is when a user clicks on the "about button," instead of showing 'about.htm ...

The box shadow feature does not function properly when the position is set to sticky

Applying position sticky to th and td in the example below seems to be causing issues with the box shadow not working. Can anyone provide insights on why this is happening? <div class="overflow-x-auto lg:overflow-visible"> <div> <t ...

The quickForm Meteor encountered an exception in the template helper: There was an error stating that Recipes is not within the window

I'm having trouble getting the app to work on Meteor. The quickform is not connecting to my Collection. "Error: Recipes is not in the window scope" Can anyone offer assistance with this issue? Below is my quickform code: <template name="NewRe ...

Bootstrap 4 modal experiencing issues with the form end tag functionality

Currently, I am facing an issue while attempting to incorporate a confirmation delete feature using a Bootstrap 4 modal in my Laravel project. The problem arises when the modal is opened, and the submit button fails to function. Upon inspecting the browser ...

Tips for passing multiple items for the onselect event in a ng-multiselect-dropdown

I've got a multi-select dropdown with a long list of options. Currently, when I choose a single item, it triggers the Onselect event and adds data from the newArrayAfterProjectFilter array to the myDataList based on certain conditions in the OnselectE ...

Having trouble with Node.js POST request; no specific error message displayed

Currently facing a challenge in communicating with an API using nodejs. I've exhausted all possible solutions, including utilizing different request modules and altering the format among other attempts. Here is the code snippet... var request = requ ...

I am experiencing issues with testing using vitest and testing-library. Could it be related to the usage of the SFC Script Setup?

Just dipping my toes into Vue, I'm venturing into the world of composition functions. Attempting to test a component that utilizes the script setup, I've hit a roadblock. Here's the component in question: <template> <el-card cl ...

Managing concurrent users updating the same form on a web application

Imagine a scenario where user A opens a form with pre-filled data. While user A makes changes to the form data, user B also opens the same form with the data intended for user A. Just as user B begins modifying the data, user A clicks on the submit butto ...

Fetching data in a post request seems to be causing an issue with FormData image being

I've implemented a profile picture file upload system with the following HTML: <form enctype="multipart/form-data" id="imageUpload" > <img id="profileImage" src="./images/avatar.png& ...