Encountering an error while attempting to add a new component instance in Vue through a button click

Question

Encountering an error while attempting to add a new component instance in Vue through a button click

Just to start, I want to mention that there might be a more appropriate way to achieve what I'm trying to do. Essentially, I'm looking to dynamically add an instance of a Vue component when a user clicks a button to expand it. I came across this discussion on the vue.js forum for guidance. However, I'm encountering an issue where triggering the insert function through a button click isn't working as expected. The console error indicates "addNewStop is not defined at HTMLButtonElement.onclick".

The HTML structure in my template:

<div id="newCont"></div>
            <button type="button" class="btn-primary" id="addStop" onclick="addNewStop()">Add Stop</button>

The script being called:

  import Stops from '@/components/Stops'

  const ComponentCtor = Vue.extend(Stops)
  const componentInstance = new ComponentCtor({})
  function addNewStop() {
    componentInstance.$mount('#newCont')
  }

I readily admit that I wasn't entirely sure about the correct approach initially and have found limited information on inserting new component instances. If there are alternative or better options out there that I should explore, I would appreciate any suggestions!

Edit:

The 'Stops' template actually consists of form inputs allowing users to specify delivery stops along a truck route. Below is its template structure:

<template>
  <div class="stops">
    <h4>Delivery</h4>
            // Form fields for shipper name, location, date, time, etc.
            
  </div>

</template>

javascript function vue.js components

Answer 1

Answer №1

When you find yourself directly manipulating the DOM, such as adding a component, while using Vue.js, it's usually a sign that you're not leveraging Vue's data-driven approach as intended. Vue is designed to handle data updates, leaving the DOM manipulation to the framework itself. Although your question lacks specific details for a tailored solution, there are some general strategies that may be effective.

If you have multiple instances of the Stop component in the DOM and each button click adds another instance, utilizing v-for to render the stops from data and having the button click handler add an entry to the data array could be a suitable approach.

<template>
    <form>
        <fieldset v-for="(stop, index) in stops" :key="index">
            <stop v-bind="whatever"/>
        </fieldset>
        <button @click="onClick">Add one</button>
    </form>
</template>

<script>
export default {
    data() {
        return {
            stops: []
        };
    },
    methods: {
        onClick() {
            this.stops.push(/* whatever */)'
        }
    },
    components {
        Stop
    }
};
</script>

Answer 2

When you find yourself directly manipulating the DOM, such as adding a component, while using Vue.js, it's usually a sign that you're not leveraging Vue's data-driven approach as intended. Vue is designed to handle data updates, leaving the DOM manipulation to the framework itself. Although your question lacks specific details for a tailored solution, there are some general strategies that may be effective.

If you have multiple instances of the Stop component in the DOM and each button click adds another instance, utilizing v-for to render the stops from data and having the button click handler add an entry to the data array could be a suitable approach.

<template>
    <form>
        <fieldset v-for="(stop, index) in stops" :key="index">
            <stop v-bind="whatever"/>
        </fieldset>
        <button @click="onClick">Add one</button>
    </form>
</template>

<script>
export default {
    data() {
        return {
            stops: []
        };
    },
    methods: {
        onClick() {
            this.stops.push(/* whatever */)'
        }
    },
    components {
        Stop
    }
};
</script>

Encountering an error while attempting to add a new component instance in Vue through a button click

Answer №1

Similar questions

Are there benefits to using AngularJS for a basic AJAX site?

Transferring information stored in a SQLite database using Python and displaying it in the

Create a customized menu with jQuery that disappears when hovered over

Combining two arrays filled with objects to form a collection of Objects on a Map

What could be the reason for my CORS headers not aligning even though they appear to be identical?

As the background image shifts, it gradually grows in size

Retrieving Records within a Specific Date Range for Check-ins and Check-outs

Tips for connecting to multiple items in an md-select element from within a directive

Execute a particular NodeJS function within the package.json scripts section

How to trigger an Angular (ionic) view update following an HTTP post request

React's onClick event listener is malfunctioning

Dynamic header that adjusts to fit window size fluctuations

Creating interactive buttons on the fly in Angular

Sending a multi-level property object to the controller in a post request

What is the process for implementing a fallback image in Material UI?

Send JSON data from a .json file to a Vue component via Express, then store it in a variable

How to retrieve multiple person or group values in SharePoint using JavaScript

How can I resolve the issue of encountering the "Modal dialog present: If you navigate away from this page, any unsaved changes will be lost" message while using Internet Explorer with

What is the most efficient way to transfer an object between two functions in AngularJS?

Is the functioning of closures identical when applied to class methods?