javascript - VueJS:'没有在实例上定义属性或方法' - 即使方法是在实例上定义的
问题描述
我想根据isTrueSet
Vue.js 中计算值“”的真实性动态绑定“调整”类。我继续收到错误消息:
[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://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>
解决方案
Task.vue 中的这一行<div class="left-task-content" :class="{ adjust: itTrueSet }">
正如评论中指出的那样,您itTrueSet
应该在isTrueSet
. (is
而不是it
)
推荐阅读
- javascript - 悬停在 Django 模板中的视频播放
- c++ - 优先级队列对对象排序不正确(用户定义的比较)
- javascript - tone.js - 为什么在 60 bpm 时 1 秒内有 192 个滴答声 (ppq)?
- vue.js - 从后端加载 i18n 翻译后的 vue 显示页面
- java - 如何直接从 /bin 运行 .jar 程序?
- reactjs - 如何在事件调用中获取卡 ID?
- javascript - 通过删除 cookie 的注销功能
- reactjs - React hooks - 从父组件调度重置状态
- c++ - detours vs MinHook 用于 DLL 注入
- python - python和conda:如果找不到包(openssl=1.1.1b=h1de35cc_0)怎么办?