Component cannot be shown on the screen

<template>
  <div v-for="corpus in getCorpora" v-bind:key="corpus.id">
    <Corpus v-bind="corpus" />
  </div>
</template>
<script>
import Corpus from "../components/Corpus";
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["getCorpora"]),
  },
  created() {
    this.$store.dispatch("fetchCorpora");
  },
  components: {
    Corpus,
  },
};
</script>

Can you help identify the issue with the code provided? I am looking to display component data dynamically upon entering new data.

Answer №1

If your code isn't working properly after updating or making it reactive, I have created a demo for you to check. Please take a look and try to identify the root cause of the problem you are encountering.

Here is the demo (I added an input field where the input value gets added to a getCorpora array on blur):

Vue.component('corpus', {
  props: ['childmsg'],
  template: '<p>{{ childmsg }}</p>'
});

var app = new Vue({
  el: '#app',
  data: {
    corpus: '',
    getCorpora: [{
        id: 1,
      name: 'Corpus A' 
    }, {
        id: 2,
      name: 'Corpus B' 
    }, {
        id: 3,
      name: 'Corpus C' 
    }]
  },
  methods: {
    addCorpus() {
      if (this.corpus) {
        const index = this.getCorpora.at(-1).id + 1
            this.getCorpora.push({
            id: index,
          name: this.corpus
        })
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  Add corpus : <input type="text" v-model="corpus" @blur="addCorpus">
  <div v-for="corpus in getCorpora" v-bind:key="corpus.id">
    <Corpus :childmsg="corpus.name"></Corpus>
  </div>
</div>

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

User-generated JSON Object with Date Information

I have created an API using Node.js/Express that receives input from a form including a date option in the request body. Currently, I am sending dates in the format YYYY-mm-dd, and I have also attempted using dd/mm/YYYY. However, when testing in Postman, ...

Connect or disconnect an element to a JavaScript event handler using an anonymous function

I'm stuck on a basic issue... I have a custom metabox in my WordPress blog, and here's my event handler: jQuery('tr input.test').on('click', function( event ){ event.preventDefault(); var index = jQuery(this).close ...

the power of using keywords and prototypes

Greetings! I am currently delving into the realm of JavaScript, hailing from a C++ background. The transition has proven to be quite perplexing for me. Below is a snippet of code that I have been troubleshooting: var someArray = []; nameCompare = function ...

Demonstration of Concurrent Page Processing in Flask

Currently, I am working on an application that heavily utilizes graphics using libraries such as Raphael and graphdracula. The main functionality of the application involves drawing various graphs across different pages named graph1, graph2, and graph3. L ...

Changing the variable within a promise in Angular 1

There seems to be an issue with updating a variable within the callback function of a promise, as shown in the code snippet below: $scope.showSelected= function (node){ var promise = $http.get("http://127.0.0.1:5000/getResource?ldpr="+nod ...

Choosing Select2: Customizing the context of formatSelection

I've created a simple custom wrapper for Select2, which has been very helpful. However, I am facing an issue with the formatSelection field. When initializing Select2 through my wrapper, it looks like this: this.elem.select2({ allowClear : option ...

Created a notification for when the user clicks the back button, but now looking to remove it upon form submission

My survey is lengthy and I don't want users to accidentally lose their data by clicking the back button. Currently, I have an alert that warns them about potential data loss, but the alert also pops up when they submit the form. Is there a way to disa ...

Using environment variables in next.config.js allows for successful connection to the database, however, when attempting to use a

Utilizing the serverless-mysql library, I have successfully connected my next app to a remote MySQL DB through an SSH tunnel with the ssh2 library. Although everything is functioning properly, I am looking to enhance the security of my code by removing the ...

JavaScript for switching between grid layouts

I have organized 3 DIVs using a grid layout. There is a Navigation bar with an on-click event attached to it. When a button on the nav-bar is clicked, I want the JavaScript function to display the corresponding grid associated with that button. Currently, ...

Update the X-axis settings in Highcharts

Is it possible to pass an array from a PHP code to Highcharts? In the following PHP code, I create 4 arrays: TMax ($rows), TMin ($rows1), Rain ($rows2) for data and another one for days of consultation ($dia). $sth = mysqli_query($con,"SELEC ...

Error with setting innerHTML property of a null nested div

This issue arises when the element is referenced before the DOM has completely loaded. To combat this, I have ensured that the necessary script runs only after the window has finished loading. Interestingly, if the getElementById() call is for a standalon ...

The error message "TypeError: usert.addItem is not a function" indicates that

Currently in the process of developing a discord bot using discord.js, sequelize, and sqlite for database management. Encountering an issue with a custom function that is not being recognized as defined by the terminal, despite me confirming its definition ...

Easiest method for implementing event emitter in ES6

Here is the current setup for my event emitter: class Table { set onDiscard(cb) { this._onDiscard = cb; } notifyDiscard(s) { if (this._onDiscard) { this._onDiscard(s); } } } Dealing with multiple events using this method can b ...

Setting up a new package through JPSM installation

I utilize jspm in my web application. My goal is to install the npm:angular2 package without needing to set it up in the config.js file. Instead of loading the angular2 module via jspm, I manually added the angular2 library like this: <script src="jspm ...

Error: Angular router outlet could not find any matching routes for the requested

I have been working on an application that utilizes lazy-loaded modules for each main section of the app. In one module, I have two router outlets - a primary one and one called details. const routes: Routes = [ { path: '', component: BooksCo ...

Exports for Express Router Module/Functions

I am currently working on exporting a function and an express router from the same file. The function is intended to verify certificates, while the route is meant to be mounted on my main class for other routes to use. I want to encapsulate both functional ...

How can I pick out paragraphs that don't end with a period and eliminate dashes using jQuery or JavaScript?

Here are the paragraphs I need assistance with: <p>This is the initial paragraph.</p> <p>This is the second one</p> <p>The third paragraph comes next.</p> <p>Last, but not least</p> The second and fourth pa ...

Modal's ng-click not triggering component's function

I am currently working on resolving an issue. My choice to use AngularJS is intentional, as I prefer not to load the entire NPM of Angular. Additionally, we heavily rely on Razor Syntax for the Web Layer. Implementation in Create.cshtml file <button ...

AngularJS Reload Scenario: A new way to refresh and enhance

My current project involves the development of a mobile app where I am retrieving data from a REST GET call. Everything is running smoothly. However, I would greatly appreciate expert advice on how to seamlessly re-render this data if the user decides to ...

Can double curly braces be added within an HTML attribute when using Vue?

Suppose I would like to include <input value='{{default}}'></input> in regular HTML. This will display a textbox with {{default}} as the default input. However, when attempting to achieve the same thing with Vue, it does not work as ...