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“表单”绑定到“提交至Google表单”。也许这是问题所在？尽管存在此问题，但似乎设置正确。

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

两者都在此jsfiddle中工作：https://jsfiddle.net/adampiziak/mrdva3kj/10/
（侦听器仅向控制台输出“已提交”）

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

1 个答案: