小编Ama*_*vey的帖子

有人在这里提出了类似的问题，但答案只有在页面上的每个元素都自动放置并且仅占据一列的情况下才有效。

我有一个12列的网格布局，其中前三行全部由一个跨越所有十二列的元素占据；那么我有三行自动放置的元素，每行占据六列。

尽管我可以根据先前的答案进行数学计算，但认为元素的计算位置未存储在Javascript可访问的任何位置似乎有些荒谬。

如果访问有关网格的计算出的CSS属性，则只会得到“自动”和“跨度6”，而不是实际计算出的行首或行尾数。真的没有办法访问grid-row和grid-column的计算值吗？

我正在尝试根据 Vue 中的用户输入有条件地呈现表单元素，但进展并不顺利。我知道如何使用 VanillaJS 或 jQuery 做到这一点，但我正在努力将这些知识转化为使用 Vue 的内置条件指令。我正在使用带有 vue-cli 的 webpack 模板的单文件组件。

从我的<template>：

<form autocomplete="off" name="loadDeets" id="loadDeets" class="loadDeets">
    <div class="form-group row">
       <label>Date</label>
       <flat-pickr v-model="date"
              :config="{dateFormat: 'l, F j'}"
                class="form-control" 
                placeholder="Select date"               
                name="date"></flat-pickr>
    </div>

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

        <div class="form-group col right">
            <label>Time</label>
            <flat-pickr
                :config="config"
                class="form-control" 
                placeholder="Select time"               
                name="time2" v-show="document.getElementById('apptCheck').checked"></flat-pickr>
        </div>
    </div>

    <div class="form-check">
        <input class="form-check-input" type="checkbox" id="apptCheck">
        <label class="form-check-label" for="apptCheck">
           Appointment?
        </label>
    </div>
 </form>

这完全破坏了页面的组件呈现。因此，我尝试使用基于 Vue …

只是作为整个事情的序言 - 我什至不确定我要处理的方法是最正确的方法。基本上，当用户单击按钮时，我需要添加一个 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"> …