I have a basic input that should update a data on input change, but it doesn't because it returns Uncaught TypeError: Cannot read property 'settings' of undefined
<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>
On each input change I receive the above error.
What am I doing wrong?
The problem is that this
in the arrow function is not referring to the object you want. One solution is to use a normal function and predefine the property url
in settings
:
new Vue({ el: '#app', data() { return { settings: { brightness: "", url: "" }, }; }, methods: { changeUrl: _.debounce(function(e) { this.settings.url = e.target.value; }, 500), saveSettings(){ } }, })
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.19/lodash.min.js"></script> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> <div id="app"> <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>
A simpler approach you may find useful is to set the variable using v-model
:
new Vue({ el: '#app', data() { return { settings: { brightness: "", }, }; }, methods: { saveSettings(){ } }, })
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.19/lodash.min.js"></script> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> <div id="app"> <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" v-model="settings.url" /> <label class="label_" for="getURL">URL Link</label> </div> <button class="button" @click="saveSettings">Save all Values</button> </div> </div>
Ciao, try to use debounce like this:
_.debounce(function(e) {
this.settings.url = e.target.value;
}, 500)
The problem is that you are using this
in a statement that is not being called on a JS class. Fix this by changing the this
to a variable name, and setting that variable name to a class.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.