Vue App ID causing issues with existing page 'addEventListener'

Got a couple of issues on my html form page after adding Vue.js.

After adding the Vue ID to the form, the addEventListener seems to stop working which prevents any form submissions from the page.

<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>


Lastly, the option selected from "JSON Dayslots" will not display in the summary at the footer of the form. I have tried a few options such as "this", "item", "search" with no joy.

Here is the form in action on my page

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

1 Answer
1

In "JSON Dayslots", your v-bind:value is set to item.slot, so vue binds items.slot to search. As a result, {{ search.shortcode }} in your search summary is trying to access item.slot.search, which doesn't exist. Setting v-bind:value to just "item" should make your code work.

v-bind:value

item.slot

items.slot

search

{{ search.shortcode }}

item.slot.search

<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>


As for your addEventListener, I'm not sure why it stops working. In your source code, your form name is myform, while the const 'form' is bound to 'submit-to-google-sheet'. Perhaps this is the problem? Although in this question, it seems to be set up correctly.

myform

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

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

Both are working in this jsfiddle: https://jsfiddle.net/adampiziak/mrdva3kj/10/

(the listener just outputs "submitted" to the console)

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.