I'm encountering an issue with my basic input in a Vue component. The input should update data on change, but instead I'm getting the error message
Uncaught TypeError: Cannot read property 'settings' of undefinedVue component
<template>
<div>
<div class="inner_container">
<p>
URL:
<span>{{settings.url}}</span>
</p>
<div class="input_row">
<input
class="input_text"
id="getURL"
type="url"
inputmode="url"
placeholder="Enter URL"
title="URL"
@input="changeUrl"
/>
<label class="label_" for="getURL">URL Link</label>
</div>
<button class="button" @click="saveSettings">Save all Values</button>
</div>
<div>
</template>
<script>
import axios from "axios";
import _ from "lodash";
export default {
name: "Home",
data() {
return {
settings: {
brightness: "",
},
};
},
methods: {
changeUrl: _.debounce((e) => {
this.settings.url = e.target.value;
}, 500),
},
};
</script>
I keep receiving the same error whenever there is an input change event.
Any insights on what might be causing this issue?