在vue.js应用程序中,我尝试使用axios使用来自java/postgresql后端的内容填充数组。我知道vue不会跟踪数组的变化,除非你使用$set关键字。当我使用$set关键字时,我遇到以下错误消息:
ManageTools.vue?45c2:109未捕获(在promise中) TypeError:>_this2.userToolsIds.$set不是计算时的函数(ManageTools.vue?45c2:109)
我已经尝试在我的函数开始时设置vm=this,如下所示...TypeError: this.$set is not a function这并没有帮助。
我必须改变什么?
<template>
<div class="card">
<div class="card-header">
<h3 class="card-title">
Tools
</h3>
</div>
<div class="card-body">
<div class="row row-eq-height">
<div class="col">
<FormDropdown
:field-content="selectedTool"
field-label="Tools"
field-name="tool"
:field-choices="tools"
field-description="Select a tool and click 'install' to install."
@updateValue="updateValue"
></FormDropdown>
<div class="row mt-2 mb-2">
<div class="col">
<button class="btn btn-primary" @click.prevent="installTool">Install Tool</button>
</div>
</div>
</div>
{{finishedFetchingToolIds}} {{finishedFetchingToolsInfo}}
<div class="col col-md-6" v-if="finishedFetchingToolsInfo">
Installed Tools
{{userTools}}
<ul>
<li v-for="tool in userTools" :key="tool">
toolname
{{tool.toolname}}
</li>
</ul>
</div>
</div>
</div>
<div v-if="showTool">
<foo>
</foo>
</div>
</div>
</template>
<style>
</style>
<script>
import axios from 'axios';
import store from "../store.js";
import FormDropdown from "@/components/FormDropdown";
export default {
name: "ManageTools",
components: {
foo: () => import('../test-plugin.js'),
FormDropdown
},
data() {
return {
showTool: false,
tools: ['mass-emailer', 'auto-text-messenger'],
selectedTool: 'mass-emailer',
userToolsIds: [],
userTools: [],
user_id: 2,
finishedFetchingToolIds: false,
finishedFetchingToolsInfo: false
}
},
methods: {
installTool() {
this.showTool = true;
console.log("showing tool");
},
updateValue() {
console.log("updating value");
}
},
watch: {
finishedFetchingToolIds() {
console.log("in watch for finishedFetchingToolIds")
for (var i = 0; i < this.userToolsIds.length; i++) {
axios.get("/tools/"+this.userToolsIds[i]).then(
response => {
console.log("tool info: "+response.data.toolname);
this.userTools.$set(i, response.data);
console.log("userTools[i]: "+this.userTools[i]);
console.log("finishedFetchingToolsInfo: "+this.finishedFetchingToolsInfo);
},
error => {
store.setAxiosErrorMessage("Failed to display tool info", error);
}
);
}
this.finishedFetchingToolsInfo = true;
}
},
mounted() {
console.log("mounted");
axios.get("/tools/installed_tools").then(
response => {
console.log("response.data[0] "+response.data[0].tool_id);
for (var i = 0; i< response.data.length; i++) {
console.log("iter = "+ i);
console.log("tool id: "+response.data[i].tool_id);
this.userToolsIds.$set(i, response.data[i].tool_id);
}
console.log("userToolsIds length: "+this.userToolsIds.length);
this.finishedFetchingToolIds = true;
},
error => {
store.setAxiosErrorMessage("Failed to display user tools info", error);
}
);
}
};
</script>
这里可以使用数组吗?或者对象会更合适吗?
https://stackoverflow.com/questions/56419397
复制相似问题