I'm facing an issue and I hope you can assist me with it.
My webpage contains Vue scripts and a list of radio selections rendered via Liquid tag and GraphQL results. The problem arises when I click the submit button or select a radio option, resulting in an error message in the console stating that a specific ID is undefined.
Interestingly, switching from radio buttons to checkboxes eliminates this problem:
I suspect the error lies within the ID handling but the console doesn't provide enough insight. Can you help identify where my mistake might be?
Below is the code snippet for the radio loop in my form:
<div class="cell large-6">
<ul class="product_category_selections">
{% graphql industry_list = 'get_homepage_industry_list' %}
{% for industry_item in industry_list.items.results %}
<li>
<label>
<input type="radio" id="{{ industry_item.id }}" value="{{ industry_item.id }}" v-model="selected_industry" /> {{ industry_item.properties.name }}
</label>
</li>
{% endfor %}
<input type="text" v-model="selected_industry" name="form[properties_attributes][industry]" />
</ul>
</div>
Followed by the scripting section:
new Vue({
el: '#request-sample-form-app',
delimiters: ["!!", "!!"],
data: {
selected_industry: [],
first_name: '',
last_name: '',
contact_number: '',
email: '',
company_name: '',
address_1: '',
address_2: '',
city: '',
state_province: '',
zip_postal_code: '',
country: '',
application_description: ''
},
methods: {
initApp: function() {
console.log('App initialized!');
this.country = 'Australia';
},
validateRequestSampleForm: function() {
var error = "";
if (!this.selected_industry) {
error += '<p>Please choose an industry</p>';
}
if (!this.first_name) {
error += '<p>Please enter first name</p>';
}
// SOME ERROR VALIDATIONS ...
if (error) {
Swal.fire({
type: "error",
title: "Error",
html: error
})
return;
} else {
return true;
}
},
validateForm: function() {
event.preventDefault();
$("#request_sample_form_application").submit();
}
},
mounted() {
this.initApp();
}
});