Vue App ID 导致现有页面“addEventListener”出现问题

Question

添加 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”中选择的选项不会显示在表单页脚的摘要中。我尝试了一些选项，例如“this”、“item”、“search”，但没有任何乐趣。

这是我页面上的表单

http://vuetest79.s3-website.eu-west-2.amazonaws.com/

Answer 1

在“JSON Dayslots”中，您的v-bind:value 设置为item.slot，因此vue 将items.slot 绑定到search。因此，您的搜索摘要中的{{ search.shortcode }} 正在尝试访问不存在的item.slot.search。将 v-bind:value 设置为 "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，而 const 'form' 绑定到 'submit-to-google-sheet'。也许这就是问题所在？虽然在这个问题中，它似乎设置正确。

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

两者都在这个 jsfiddle 中工作：https://jsfiddle.net/adampiziak/mrdva3kj/10/
（监听器只是将“提交”输出到控制台）