Vue 组件

Question

VueJS = Uncaught TypeError：无法读取未定义的属性“设置”

2020-08-01

982

javascript vue.js

我有一个基本输入，它应该在输入更改时更新数据，但是没有，因为它返回 Uncaught TypeError: Cannot read property 'settings' of undefined

Vue 组件

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

每次输入更改时我都会收到上述错误。

我做错了什么 ?

Answer 1

问题是 在箭头函数中此 不是指所需的对象。一种解决方案是使用普通函数并预先定义属性 url in settings ：

016325200

您可以使用一种更简单的方法找到有用的是使用 V-Model ：

927558588 设置变量。

Answer 2

你好，尝试像这样使用去抖动：

_.debounce(function(e) {
  this.settings.url = e.target.value;
}, 500)

Giovanni Esposito

2020-08-01

Answer 3

问题在于，您在未在 JS 类上调用的语句中使用了 this 。通过将 this 更改为变量名，并将该变量名设置为类来解决此问题。