Javascript Vue应用程序ID导致现有页面“addEventListener”出现问题

添加Vue.js后，我的html表单页面出现了几个问题

将Vue ID添加到表单后，addEventListener似乎停止工作，从而阻止任何表单从页面提交

    <form name="myform" id="deliveryservice">

                <select v-model="search">
                    <option disabled="disabled" value="">JSON Dayslots</option>
                    <option v-for="item in items" v-bind:value="item.slot">
                    {{ item.shortcode }} {{ item.slot }}
                    </option>
                </select>

                <select v-model="servicev" required>
                <option selected disabled hidden>Please Select</option>
                <option value="standard">Standard</option>
                <option value="installation">Installation</option>
                </select>

                <div class="maxfee">
                    <input name="price" v-model.number="pricev" type="currency" placeholder="Max price you will pay" required>
                </div>

                <div class="summary"><p>Summary:</p></div>
                <p class="summaryresult" style="font-weight:bold;">I would like {{ search.shortcode }} on {{ servicev }} service and pay no more than £{{ pricev }}</p>

                <button type="submit">Submit</button>
            </form>

        <div class="loading js-loading is-hidden">
        <div class="loading-spinner">
            <svg><circle cx="25" cy="25" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/></svg>
        </div>
        </div>

        <p class="js-success-message is-hidden">Thanks! You are now monitoring that share price.</p>
        <p class="js-error-message is-hidden">Error!</p>

    <script>
    const app = new Vue({
        el: '#deliveryservice',
        data: {   
            items: [],
            search: '',
            dayslotvv: '',
            servicev: '',
            pricev: ''

        },
        created: function() {
            fetch('https://s3.eu-west-2.amazonaws.com/dayslots10/dayslots.json')
            .then(resp => resp.json())
            .then(items => {        
                this.items = items
            })
        }
        });
        </script>

    <script>
        const scriptURL = 'https://script.google.com/macros/s/AKfycbwBJJPS5kY3o17bj_Nc6DIx8KTnXGPa6iVjlSZ7HA/exec'                      
        const form = document.forms['myform']
        const loading = document.querySelector('.js-loading')
        const successMessage = document.querySelector('.js-success-message')
        const errorMessage = document.querySelector('.js-error-message')

        form.addEventListener('submit', e => {
        e.preventDefault()
        showLoadingIndicator()
        fetch(scriptURL, { method: 'POST', body: new FormData(form)})
            .then(response => showSuccessMessage(response))
            .catch(error => showErrorMessage(error))
        })

        function showLoadingIndicator () {
        form.classList.add('is-hidden')
        loading.classList.remove('is-hidden')
        }

        function showSuccessMessage (response) {
        console.log('Success!', response)
        setTimeout(() => {
            successMessage.classList.remove('is-hidden')
            loading.classList.add('is-hidden')
        }, 500)
        }

        function showErrorMessage (error) {
        console.error('Error!', error.message)
        setTimeout(() => {
            errorMessage.classList.remove('is-hidden')
            loading.classList.add('is-hidden')
        }, 500)
        }
    </script>

最后，从JSON Dayslots中选择的选项将不会显示在表单页脚的摘要中。我已经尝试了一些选项，例如这个，项目，搜索没有乐趣

这是我页面上正在运行的表单

在JSON Dayslots中，您的v-bind:值设置为item.slot，因此vue将items.slot绑定到搜索。因此，搜索摘要中的{search.shortcode}}正在尝试访问不存在的item.slot.search。将v-bind:value设置为just item应该可以使代码正常工作

<select v-model="search">
    <option disabled="disabled" value="">JSON Dayslots</option>
       <option v-for="item in items" v-bind:value="item">
          {{ item.shortcode }} {{ item.slot }}
    </option>
 </select>

至于你的addEventListener，我不知道为什么它会停止工作。在源代码中，表单名为myform，而常量“form”绑定为“submit to GoogleSheet”。也许这就是问题所在？虽然在这个问题上，它似乎设置正确

const form=document.forms['submit-to-google-sheet']

两者都在这个JSFIDLE中工作： 侦听器只是将输出提交到控制台