Vue App ID, вызывающий проблемы с существующей страницей addEventListener

Question

После добавления файла Vue.js.

на моей странице формы HTML появилось несколько проблем.

После добавления идентификатора Vue в форму 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», не будет отображаться в сводке в нижнем колонтитуле формы. Я пробовал несколько вариантов, таких как «это», «пункт», «поиск» без радости.

Вот форма в действии на моей странице

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 «форма» связана с «submit-to-google-sheet». Возможно, это проблема? Хотя в этом вопросе, похоже, он настроен правильно.

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

Оба работают в этом jsfiddle: https://jsfiddle.net/adampiziak/mrdva3kj/10/
(слушатель просто выводит "отправлено" на консоль)