通过按钮单击返回错误在 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')
  }

我会坦率地承认，我一开始并不确定如何执行此操作，并且发现有关如何插入新组件实例的信息出奇地少。如果我应该探索其他更好的选择，请告诉我！

编辑：

停靠点实际上是一个包含表单输入的模板，允许用户指定卡车路线上的送货停靠点。这是它的模板：

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