Javascript 通过按钮单击在Vue中添加新组件实例返回错误

只是作为整个事情的序幕--我甚至不确定我现在的方式是否是最正确的方式。基本上，当用户单击按钮时，我需要添加一个Vue组件的实例。我使用vue.js论坛中的讨论提供帮助。不幸的是，通过单击按钮触发此插入功能不起作用。控制台显示“addNewStop未在HtmlButtoneElement.onclick中定义”错误

我的模板中的HTML：

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

我可以坦率地承认，我一开始不确定如何进行这项工作，并且发现关于如何插入新组件实例的信息少得令人惊讶。如果除此之外还有其他更好的选择，请让我知道

编辑：

Stops实际上是一个包含表单输入的模板，允许用户指定卡车路线上的交货站。以下是其模板：

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

传送
托运人名称
地方
日期
时间
时间2
时间范围？
地点说明：
是否保存此位置的位置注释？

在大多数情况下，尝试直接操作DOM（例如通过添加组件）是一种迹象，表明您没有按预期使用Vue.js。Vue是数据驱动的，这意味着您的代码应该只更新数据，将DOM操作留给Vue本身。您的问题没有为特定的解决方案提供足够的详细信息，但有两种通用方法可能有效

如果DOM中有许多

Stop

组件，单击按钮只需添加另一个组件，则使用

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>

加一
导出默认值{
数据（）{
返回{
停止：[]
};
},
方法：{
onClick（）{
这个。停止。按（/*无论什么*/）'
}
},
组成部分{
停止
}
};

声明一个数据属性=

停止：[]

，在

内部，添加模板，如

我已经看过v-for，但感觉它是用于列表呈现的；我正在尝试向表单中添加节。我应该澄清我的问题，那是我的错！我已经用我的停止模板更新了这个问题。

v-for

在任何时候都是合适的，无论您是以

、

还是完全不同的方式呈现数据数组。我修改了我的示例，以展示如何在一个

中呈现多个

元素。感谢您的澄清，并帮助我调整使用Vue的思路！将我的思维导向数据而不是DOM一直是一场斗争。

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