使用时Array.filter()我不确定如何实现我在下面描述的内容。
我不想为此创建一个新类型(但如果没有其他办法,那也没关系):
interface GPSLocation {
lat: number
lng: number
}
interface House {
address: string
location?: GPSLocation
}
const house01: House = {
address: '123 street'
}
const house02: House = {
address: '123 street',
location: {
lat: 111.111,
lng: 222.222
}
}
const allHouses = [house01, house02]
// Infered by Typescript: const gpsLocationList: (GPSLocation | undefined)[]
// Expected: const gpsLocationList: (GPSLocation)[]
const gpsLocationList = allHouses.filter((house) => house.location !== undefined).map(house => house.location)
Run Code Online (Sandbox Code Playgroud) 在我的Vue/Vuetify单页面应用程序中,当我向下滚动页面并单击页面底部的链接时,它确实会更改路径并将我带到下一页但它不会滚动到下一页的顶部页/组件.
结果,如果第一页很长而第二页的内容很少,则给人的印象是第二页缺少内容.由于只有当用户滚动到页面顶部时内容才可见.
Page 01 - 我正处于一个很长的名单中,只是一个例子
第02页 - 下一个组件在中间加载
我正在使用VueJS。
我有一个接收对象作为参数的方法。
然后,我用复制该对象Object.assign()。
Component.vue
export default {
// ...
methods: {
// ...
activateEditMode (item) {
this.editItemIndex = this.travelItinerary.indexOf(item)
this.editItem = Object.assign({}, item)
// ...
}
}
}
Run Code Online (Sandbox Code Playgroud)
原始对象位于this.roteiroCompleto[0]:
但是当我编辑克隆对象时this.itemEditado:
原始对象this.roteiroCompleto[0]也会更改。
我试图复制每个键和值,仅复制带有.slice(),的Array ,.map(a=>a)但没有任何效果。这两个对象保持绑定。
当我console.log(this.itemEditado)得到这个:
奇怪的是,在另一个Vue组件中,我使用了相同的策略,并且有效。
我总是使用 vue-cli 构建我的 SPA 应用程序。
这次我正在构建一个小项目,我将 Vue 与脚本标签结合在一起。
但我不明白以下行为。
// app.js
Vue.component('todo-item', {
template: `<div>Todo Component!</div>`
})
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue App!'
}
})
Run Code Online (Sandbox Code Playgroud)
HTML index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Title</title>
</head>
<body>
<div id="app">
{{ message }}
<div>
Just some content...
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./js/app.js"></script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
结果是这样的:
现在,我将尝试'<todo-item />'在 HTML 中添加Component:
<div id="app">
{{ message }} …Run Code Online (Sandbox Code Playgroud)