VueJS：'没有在实例上定义属性或方法' - 即使方法是在实例上定义的

Question

我想根据 Vue.js 中计算值“ isTrueSet ”的真实性动态绑定“调整”类。 我继续收到错误消息：

[Vue warn]: Property or method "itTrueSet" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <Task> at src/components/Task.vue
     <TaskList> at src/components/TaskList.vue
       <TaskTracker> at src/components/TaskTracker.vue
         <App> at src/App.vue
           <Root>

“ isTrueSet ”是实例上的计算属性，所以我很困惑为什么会收到此错误消息。

关于为什么会发生这种情况的任何指导，我将不胜感激。

我的单个文件组件如下所示：

我的模板代码如下所示：

src/components/Task.vue

<template>
  <div
    class="task-wrapper"
    :style="style"
    :class="[isTrueSet ? 'adjust' : '', editTask ? 'editTask' : '']"
  >
    <div class="left-task-content" :class="{ adjust: itTrueSet }">
      <h1 class="task-height task-title">
        {{ title }}
      </h1>
      <h2 class="task-date">{{ momentDate }}</h2>
    </div>
    <div class="right-task-content">
      <font-awesome-icon
        @click="toggleRemider"
        class="fa-spacer"
        icon="bell"
      ></font-awesome-icon>
      <font-awesome-icon
        @click="askToUpdateTask(id)"
        class="fa-spacer"
        icon="edit"
      ></font-awesome-icon>
      <font-awesome-icon
        @click="askToDeleteTask(id)"
        class="fa-spacer"
        icon="times-circle"
      ></font-awesome-icon>
    </div>
  </div>
</template>

我的 JavaScript 看起来像这样：

src/components/Task.vue

<script>
import { library } from "@fortawesome/fontawesome-svg-core";
import { faTimesCircle, faEdit, faBell } from "@fortawesome/free-solid-svg-icons";
import moment from "moment";
library.add([faTimesCircle, faEdit, faBell]);
export default {
  name: "Task",
  components: {},
  data() {
    return {
      editTask: false,
    };
  },
  props: {
    title: String,
    date: String,
    id: Number,
    reminder: {
      type: String,
      default: "false",
    },
    taskColor: Array,
  },
  computed: {
    isTrueSet: function () {
      if (this.reminder == "true") {
        return true;
      } else {
        return false;
      }
    },
    style: function () {
      return `background-image: linear-gradient(${this.taskColor[0]}, ${this.taskColor[1]}); background-size: cover; `;
    },
    momentDate: function () {
      return moment(this.date).format("MMM Do YYYY");
    },
  },
  methods: {
    askToDeleteTask: function (id) {
      this.$emit("askToDeleteTask2", id);
    },
    askToUpdateTask: function (id) {
      this.$emit("askToUpdateTask2", id);
      if (this.editTask == false) {
        this.editTask = true;
      } else {
        this.editTask = false;
      }
    },
    toggleRemider: function () {
      this.$emit("toggleReminda");
    },
  },
};
</script>

父组件如下所示：

src/components/TaskList.vue

<template>
  <div class="padding-end">
    <Task
      v-for="(task, index) in info"
      @toggleReminda="convertRemind(task)"
      :title="task.title"
      :date="task.date"
      :reminder="task.reminder.toString()"
      :key="task.id"
      :id="task.id"
      v-on:askToDeleteTask2="deleteTask"
      v-on:askToUpdateTask2="askToUpdateTask3"
      :taskColor="getGradientColors(index)"
    />
  </div>
</template>

<script>
import Task from "./Task.vue";
import axios from "axios";
import Gradient from "javascript-color-gradient";

export default {
  name: "TaskList",
  components: {
    Task,
  },
  data() {
    return {
      info: null,
      colours: [],
      colourPairs: [],
    };
  },
  props: {
    taskData: Object,
  },
  mounted() {
    axios.get("http://localhost:3000/tasks").then((response) => {
      this.info = response.data;
      let colorGradient = new Gradient();
      const color1 = "#FFC300";
      const color2 = "#C7003A";

      colorGradient.setMidpoint(this.info.length * 2);
      colorGradient.setGradient(color1, color2);
      this.colours = colorGradient.getArray();
    });
  },
  computed: {},
  beforeUpdate() {},
  methods: {
    deleteTask: function (id) {
      axios
        .delete(`http://localhost:3000/tasks/${id}`)
        .then(() => {
          this.info = this.info.filter((task) => {
            return task.id !== id;
          });
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    askToUpdateTask3: function (id) {
      let taskToUpdate = this.info.filter((task) => task.id == id);
      this.$emit("askToUpdateTask4", taskToUpdate);
    },
    convertRemind: function (task) {
      if (task.reminder == "false") {
        task.reminder = "true";
      } else {
        task.reminder = "false";
      }
    },
    getGradientColors: function (index) {
      while (this.colours.length > 0) {
        this.colourPairs.push(this.colours.splice(0, 2));
      }
      return this.colourPairs[index];
    },
    sortList: function () {
      this.info.reverse();
    },
  },
};
</script>

<style scoped>
.padding-end:last-child {
  padding-bottom: 10px;
}
</style>

Answer 1

Task.vue 中的这一行<div class="left-task-content" :class="{ adjust: itTrueSet }">

正如评论中所指出的，当它应该是isTrueSet itTrueSet （ is代替it ）