javascript - 在 Typescript 中访问 Vue 数据对象
问题描述
我刚刚从纯 JavaScript 切换到 Typescript(或者至少我正在尝试)。这是之前完美运行的代码,减去到目前为止所做的输入:
<script lang="ts">
import axios from 'axios';
export default {
name: "Index",
data() {
return {
years: Array,
bgs: Array
}
},
methods: {
loadYears: function (): void {
let self = this;
axios.get('../letter/get/years').then(function (response) {
function pushYears(value: any) {
self.years.push(value);
}
response.data['years'].forEach(pushYears);
});
},
loadBg: function (): void {
let self = this;
axios.get('../bg/get/all').then(function (response) {
JSON.parse(response.data['bgs']).forEach(function (obj: any) {
self.bgs.push(obj);
})
});
}
},
beforeMount() {
this.loadYears();
this.loadBg();
}
}
</script>
现在切换到 Typescript 后,self.years.push(value) 和 self.bgs.push(obj) 不再工作,相应的错误说:“self.$data.years.push 不是函数”。有趣的是,在 beforeMount() 函数中,我收到一条错误消息,指出未定义 loadYears() 和 loadBg,但通过 this.data().years 或 bgs 访问 data() 对象在此块中完美运行。如何在我的方法块中访问这些属性?
解决方案
您有两种方法来处理type
您的数据属性,如下所示:
<script lang="ts">
import Vue from 'vue';
interface Model {
name: string
age: number
}
export default Vue.extend({
data () {
const foo: Model[] = [];
return {
foo,
bar: [] as Model[]
};
},
mounted () {
this.foo.push({
name: 'user', age: 22
});
this.bar.push({
name: 'guest', age: 20
});
},
});
</script>
推荐阅读
- apache-spark - Spark Job 即使失败也能成功
- ruby-on-rails - 获取任何模型的 ActiveAdmin 路径
- firebase - 如何使用 request.auth 发送 Firestore 请求!= null 与 Firebase 身份验证?
- gitlab - 如何防止项目维护者在 GitLab 中添加新成员?
- c++ - 为什么头文件中有多个“公共”关键字?
- python - 使用python下载excel文件
- bootstrap-4 - Bootstrap 列不像我期望的那样工作?
- ios - 在目标 C 中的 Viewcontroller 类之外的 uiwebview 控制器上调用函数
- c# - ASP.NET CORE 中的 Projection 和 Join 表有什么区别
- c - 如何读取带有空白单元格的表单 CSV 文件(所有单元格都是字符串)