At the moment, I have encountered an issue with a selector in Vue returning undefined for {{ lens.price }}. However, when I use
a = lens[1].getAttribute('price')"0".
Why is Vue showing this data as undefined? The property works perfectly fine in the browser for all options returned from the loop.
Should I combine both properties into a single value tag name?
HTML/LIQUID:
<div>
<label for="lens"></label>
<select id="lens" name="line_items[lens]" @change="handleChange('lens', $event); secondChange($event);"
class="mt-3 option-selector text-sm lg:text-base uppercase block appearance-none w-full bg-white text-gray-900 py-3 px-4 pr-8 rounded-sm leading-tight focus:outline-none focus:border-black font-bold">
<option>Choose a lens</option>
{% for lens in collections.lenses.products %}
<option price="{{ lens.price }}" value="{{ lens.variants[0].id }}">{{ lens.title }} |
{{ lens.price | plus: product.price | money_without_trailing_zeros}}</option>
{% endfor %}
</select>
</div>
BREAKDOWN OF VUE: (NOT COMPLETE CODE)
data: function () {
return {
buttonText: false,
slideOut: false,
disableAddToCart: true,
chosenLens: '',
chosenFilter: '',
lensPrice: ''
}
handleChange(type, e) {
if (type === 'lens') {
if (e.target.value) {
this.chosenLens = e.target.value;
}
else {
this.chosenLens = ''
}
}
if (type === 'filter') {
this.chosenFilter = e.target.value || ''
}
this.disableAddToCart = !(this.chosenLens && this.chosenFilter);
},
secondChange(e) {
this.lensPrice = `${e.target.price}`;
},
I tried using Javascript only: (resulted in undefined)
<div>
<label for="lens"></label>
<select id="lens" onchange="myFunction()" name="line_items[lens]" @change="handleChange('lens', $event);"
class="mt-3 option-selector text-sm lg:text-base uppercase block appearance-none w-full bg-white text-gray-900 py-3 p...
<option>Choose a lens</option>ө
</script>
Using only attribute name 'value': (working)
<div>
<label for="lens"></label>
</script>