Troubleshooting Vue component data management issues

I'm perplexed as to why the data is coming up as undefined even though I am passing the correct property from the component.

Here is my Vue component:

Vue.component('store-squaretile-component',{
    template: '#store-squaretile-component',
    props: [
        'storeName'                 
    ],
    data: function () {
        return {}
    },
});

This is the template for the component:

<script type='text/x-template' id='store-squaretile-component'>
        <div class="stores-squaretile__container">
            <div class="stores-squaretile__btn stores-squaretile__btn--shadow" >
                <!-- background of store-squaretile to be set to img -->
                <div class="dropdown">
                    <div class="stores-squaretile__threedots" data-bs-toggle="dropdown" >
                        <i class="fas fa-ellipsis-v"></i>
                    </div>
                    
                    <ul id="dropdown-menu-store" class="dropdown-menu" >
                        <div class="'dropdown-item dropdown-title">Quick Actions</div>
                        <div class="dropdown-line"></div>
                        <a class="dropdown-item" href="#">Edit Store</a>
                        <a class="dropdown-item" href="#">Delete Store</a>
                    </ul>       
                </div>
            </div>
            <div class="stores-squaretile__title">{{storeName}}</div>    
        </div>
</script>

When I pass the following array to the component:

stores: [
            {name: "harry's",},
            {name: "Carl's junior",},
            {name: "Mcdonald's",}               
        ]

into this component

<store-squaretile-component
    v-for="store in stores"
    :storeName="store.name"    
></store-squaretile-component> 

It should replace the storeName with the name in the array, but instead I'm either getting NaN or the title disappears altogether.

I'm getting an undefined value. Any idea why this might be happening?

https://i.sstatic.net/85hes.png

Answer №1

Everything seems to be running smoothly now. I made a few adjustments, such as replacing storeName with storename and including :key in the v-for loop:

Vue.component('store-squaretile-component', {
  template: '#store-squaretile-component',
  props: ['storename'],
})

new Vue({
  el: '#demo',
  data() {
    return {
      stores: [
        {name: "harry's", },
        {name: "Carl's junior",},
        {name: "Mcdonald's",}               
      ]
    }
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <store-squaretile-component
    v-for="(store, idx) in stores"
    :storename="store.name"    
    :key="idx"
  ></store-squaretile-component> 
</div>
<script type='text/x-template' id='store-squaretile-component'>
  <div class="stores-squaretile__container">
    <div class="stores-squaretile__btn stores-squaretile__btn--shadow" >
      <div class="dropdown">
        <div class="stores-squaretile__threedots" data-bs-toggle="dropdown" >
          <i class="fas fa-ellipsis-v"></i>
        </div>
        <ul id="dropdown-menu-store" class="dropdown-menu" >
          <div class="'dropdown-item dropdown-title">Quick Actions</div>
          <div class="dropdown-line"></div>
          <a class="dropdown-item" href="#">Edit Store</a>
          <a class="dropdown-item" href="#">Delete Store</a>
        </ul>       
      </div>
    </div>
    <div class="stores-squaretile__title">{{storename}}</div>    
  </div>
</script>

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

Issue with exporting VueJS-generated HTML containing checkboxes results in loss of checkbox checked state

In the template of my component, I have a checkbox code that looks like this: <div ref="htmlData"> <input type="checkbox" class="mycb" :id="uniqID" :disabled="disabled" v-model="cbvalue" > &l ...

The issue with Mongoose populate failing to populate

I'm facing an issue with populating my users' car inventory. Each car has a userId attached to it upon creation, but for some reason, the population process isn't working as expected, and no errors are being displayed. Let's take a loo ...

Why does jQuery treat an integer as a string when adding it to a variable?

While working on a for statement, I encountered an issue with adding an integer to a variable that increments. Strangely enough, the addition operation treats the integer as a string. However, other operations like subtraction or multiplication behave as e ...

Automatically scroll the chat box to the bottom

I came across a solution on Stackoverflow, but unfortunately, I am having trouble getting it to work properly. ... <div class="panel-body"> <ul id="mtchat" class="chat"> </ul> </div> ... The issue lies in the JavaScript t ...

Issue with Bootstrap v3.3.6 Dropdown Functionality

previewCan someone help me figure out why my Bootstrap dropdown menu is not working correctly? I recently downloaded Bootstrap to create a custom design, and while the carousel is functioning properly, when I click on the dropdown button, the dropdown-menu ...

How can I make a div scroll by a precise number of pixels using Vue?

In my Vue2 app, I attempted to scroll up a div by 10px using the following method: this.$refs.hello.scrollTo({ top: 10, left: 0, behavior: "smooth"}); Unfortunately, instead of scrolling up by 10px, it scrolls all the way to the top. How can I s ...

Is it possible that using npm link could be the root cause of the "module not

As I delve into understanding how to utilize TypeScript modules in plain JavaScript projects, it appears that I am facing a limitation when it comes to using npm linked modules. Specifically, I can successfully use a module that is npm-linked, such as &apo ...

I am interested in duplicating the li elements retrieved from a JSON source

$.getJSON("leftlist.json" , function(data) { $.each(data.articles,function(){ $('#ullist').before("<li id='mylic' style= color:blue class='item new"+cc+"'> "+el.name+"<div class='block'>&l ...

To effectively manage this file type with Vue and vue-chartjs, it is essential to utilize a suitable loader

I have been working on an application that has multiple pages functioning properly. I am now trying to incorporate a new page with a chart feature. In order to test it out, I made modifications to include the necessary packages. "dependencies": { ...

Encountering a issue of not finding the cli.json file while setting up a fresh Vue project with

Encountering issues with missing cli.json file while trying to initialize a new Vue project using Amplify. Following the steps in the official tutorial Managed to get to the point of Initializing a new backend and executing amplify init: https://i.sstati ...

Vue 3 required but not found as a peer dependency

Every time I execute npm list -g --depth=0 command in cmd, npm throws this error. +-- @vue/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="086b6461483c263d263e">[email protected]</a> +-- <a href="/cdn-cgi/l/emai ...

Increase the worth of current value

Whenever a user enters their name into an input box, I want it to be shown after the word 'hello'. However, currently, the word 'hello' gets replaced by the user's name instead of being displayed after it. var name = document.ge ...

The results of running 'npm run dev' and 'npm run build prod' are different from each other

Currently, I am in the process of developing a progressive web app using Vue.js. During development, I utilize the command npm run dev to initiate the local server that serves the files over at http://localhost:8080/. When it comes time to build for produ ...

Update the table that includes a php script

I have a piece of PHP code embedded within a table tag that displays text from a database. I am looking for a way to automatically refresh this table every minute with updated content from the database, without refreshing the entire page. While I have co ...

Leveraging the keyword 'this' within an object method in node's module.exports

My custom module: module.exports = { name: '', email: '', id: '', provider: '', logged_in: false, checkIfLoggedIn: function(req, res, next){ console.log(this); } }; I inclu ...

Displaying a list of text elements in a React component

Can someone help me figure out why my React app is not rendering a flat array of strings with the following code? {array.length > 0 ? ( <div> <h5>Email list</h5> <div style={{ paddingLeft: "50px", ...

Is there a way to convert the text within a div from Spanish to English using angular.js?

I am working with a div element that receives dynamic text content from a web service in Spanish. I need to translate this content into English. I have looked into translation libraries, but they seem more suited for individual words rather than entire dyn ...

A function designed specifically for parsing and manipulating hyperlinks within dynamically added content using jQuery

I have a unique one-page layout All my content "pages" are stored in separate divs, which are initially hidden using jQuery When a menu item is clicked, the inner content of the page holder is dynamically switched using html() However, I am facing an is ...

I am looking for a setup where a checkbox triggers the opening of the next accordion

I am encountering a problem with the bootstrap accordion feature. I am looking to have the first accordion nested inside a checkbox, so that when the checkbox is clicked, the next accordion automatically opens. If the checkbox is not clicked, the next ac ...

Fatal error: artisan storage:link in Laravel terminated

the non-functional link and the generated file content I have established a directory called "storage" within the public folder and attempted to execute: artisan storage:link however, it results in the message "Killed". I am looking to store images in ...