小编ext*_*axt的帖子

Typescript 和 Array.filter() 一起工作

使用时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)

typescript

6
推荐指数
1
解决办法
1153
查看次数

路线更改为下一个组件时,请勿自动滚动到顶部

在我的Vue/Vuetify单页面应用程序中,当我向下滚动页面并单击页面底部的链接时,它确实会更改路径并将我带到下一页但它不会滚动到下一页的顶部页/组件.

结果,如果第一页很长而第二页的内容很少,则给人的印象是第二页缺少内容.由于只有当用户滚动到页面顶部时内容才可见.

Page 01 - 我正处于一个很长的名单中,只是一个例子

在此输入图像描述

第02页 - 下一个组件在中间加载

在此输入图像描述

vue-component vuejs2 vuetify.js

5
推荐指数
1
解决办法
2835
查看次数

Object.assign无法正确复制

我正在使用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组件中,我使用了相同的策略,并且有效。

javascript vue.js vuejs2

5
推荐指数
2
解决办法
3818
查看次数

当插入一个新组件时,其余的所有组件都将消失在应用程序中

我总是使用 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)

vue.js vuejs2

2
推荐指数
1
解决办法
590
查看次数