Добавление нового экземпляра компонента в Vue с помощью нажатия кнопки возврата

Question

Просто, чтобы предсказать все это, я даже не уверен, что то, как я поступаю, это самый правильный способ сделать это. По сути, мне нужно добавить экземпляр компонента Vue, когда пользователь нажимает кнопку расширения. Я использовал это обсуждение на форуме vue.js, чтобы помочь. К сожалению, запуск этой функции вставки с помощью нажатия кнопки не работает. Консоль показывает ошибку «addNewStop не определен в HTMLButtonElement.onclick».

HTML в моем шаблоне:

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

Сценарий, который я звоню:

  import Stops from '@/components/Stops'

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

Я свободно признаю, что я не был уверен, как это сделать, во-первых, и нашел удивительно мало информации о том, как вставлять экземпляры новых компонентов. Если есть другие, лучшие варианты, которые я должен изучить помимо этого, пожалуйста, дайте мне знать!

Edit:

Остановки - это на самом деле шаблон, содержащий входные данные формы, позволяющие пользователю указать остановку доставки по маршруту грузовика. Вот его шаблон:

<template>
  <div class="stops">
    <h4>Delivery</h4>
            <div class="form-group">
                  <label for="shipName">Shipper Name</label>
                <vue-simple-suggest
                    :list="simpleSuggestionList"
                    :filter-by-query="true" id="shipName" placeholder="Start typing a name" autocomplete="autofill-myself"></vue-simple-suggest>
                </div>
            <div class="form-group">
                  <label for="locationPickup">Location</label>
                <vue-simple-suggest
                    :list="simpleSuggestionList"
                    :filter-by-query="true" id="locationPickup" placeholder="Start typing an address" autocomplete="custom-addresses"></vue-simple-suggest>
                </div>
                <div class="form-group row">
              <label>Date</label>
              <flat-pickr
              :config="dateConfig"
                class="form-control" 
                placeholder="Select date"               
                name="date" id="date1"></flat-pickr>
            </div>

            <div class="row">
              <div class="form-group col left">
              <label>Time</label>
              <flat-pickr
                :config="timeConfig"
                class="form-control" 
                placeholder="Select time"               
                name="time1" id="time1"></flat-pickr>
              </div>

              <div class="form-group col right">
              <label v-show="pickupChecked">Time 2</label>
              <flat-pickr
                :config="timeConfig"
                class="form-control" 
                placeholder="Select time"               
                name="time2" v-show="pickupChecked" id="time2"></flat-pickr>
              </div>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" v-model="pickupChecked" id="apptCheck1" >
                <label class="form-check-label" for="apptCheck1">
                  Time range?
                </label>
            </div>
             <div class="form-group row">
              <label for="userAboutMe">Location notes:</label>
              <textarea class="form-control" id="userAboutMe" rows="3" placeholder="Is there any information about the location that the driver should know?"></textarea>
              <div class="form-check">
                <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
                <label class="form-check-label" for="defaultCheck1">
                  Save location notes for this place?
                </label>
              </div>
            </div>
  </div>

</template>

Answer 1

В большинстве случаев попытки манипулировать DOM напрямую (например, путем добавления компонента) являются признаком того, что вы не используете Vue.js, как это было задумано. Vue управляется данными, что означает, что ваш код должен просто обновлять данные, оставляя манипуляцию DOM самой Vue. В вашем вопросе недостаточно подробностей для конкретного решения, но есть несколько общих подходов, которые могут сработать.

Если у вас есть несколько Stop компонентов в DOM, и нажатие на кнопку просто добавляет еще один, затем используйте v-for для рендеринга остановок из данных, а обработчик щелчка кнопки просто добавляет еще одну запись в массив данных.

<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>