我对VueJS还是个新手。我的问题是使用typescript将我的vuejs项目转换为vuejs。我已经研究过将函数绑定到javascript中的某些变量,但在typescript中却迷失了方向。下面是我的javascript代码,然后我尝试将其重构为typescript。在开发人员工具中没有显示错误,但是vuejs的route.query根本没有变化。
我想要做的是创建一个类似于自动搜索的组件。我确信我在打字稿中使用lodash的方式是不正确的,但也许我的整个代码都是不正确的。下面只有一个组件,但还有另一个组件,即CharacterCard,它也监视router.query上的事件更改,并根据用户查询向服务器发出get请求以获取。另外,有没有更好的方法或者更好的方法呢?
如果您需要更多详细信息,请告诉我。
<script>
import CharacterService from '../../services/characterService'
import CharacterCard from '../../components/_shared/CharacterCard.vue'
import Lodash from 'lodash'
export default {
components: {
CharacterCard
},
data () {
return {
dialog: false,
search: ''
}
},
methods: {
dialogAndSearchReset () {
this.search = ''
this.dialog = false
}
},
watch: {
// debounce of 700ms
search: Lodash.debounce(async function (value) {
// for route query
let route:any = {}
route = {
name: 'characters'
}
if (this.search !== '') {
route.query = {
search: this.search
}
}
// || this.$route.name === 'character'
if (this.$route.name === 'characters') {
this.$router.push(route)
}
}, 700),
'$route.query.search': {
immediate: true,
handler (value) {
this.search = value
}
},
$route (to, from) {
if (this.dialog === true && this.$route.name === 'character') {
this.dialogAndSearchReset()
}
}
}
}
</script>
我的尝试是:
<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import CharacterSearchCard from './CharacterSearchCard.vue';
import _ from 'lodash';
@Component({
components: {
charactersearchcard: CharacterSearchCard,
},
})
export default class QuickSearch extends Vue {
// model for Dialog example
public customDialogModel: boolean = false;
public search: string = '';
// public quickSearch: any = this.$route.query.search || null; // the url search query
@Watch('search')
public searchCharacter(value: any) {
_.debounce(async () => {
// for route query
let route: any = {};
route = {
name: 'characters',
};
if (value !== '') {
route.query = {
search: value,
};
}
if (this.$route.name === 'characters') {
this.$router.push(route);
}
}, 700);
}
@Watch('$route.query.search', { immediate: true })
public searchHandler(value: any) {
this.search = value;
}
@Watch('$route')
public changeRoute(to, from) {
if (this.customDialogModel === true && this.$route.name === 'character') {
this.closeAndReset();
}
}
public closeAndReset() {
this.search = '';
this.customDialogModel = false;
}
public navigateTo(e) {
this.$router.push({
name: e,
});
}
}
</script>
发布于 2018-06-24 07:17:24
我是从这个帖子里想出来的:
https://github.com/vuejs-templates/browserify-simple/issues/6
这样,我的新代码就是这样的:
public debouncedSearchCharacter = _.debounce((search) => {
this.searchFinder(search);
}, 700);
public searchFinder(search) {
if (this.startSearch) {
// for route query
// first check if modal is open
let route: any = {};
route = {
name: 'characters',
};
console.log(`search searching: ${search}`);
console.log('in debounce search');
if (search !== '') {
route.query = {
search,
};
}
console.log(`what route: ${route}`);
if (this.$route.name === 'characters') {
console.log(this.$router.currentRoute);
this.$router.push(route);
}
}
}
问题出在箭头函数:就像我怀疑的那样,将关键字/属性this绑定到父上下文,这是上下文中没有引用它的去反跳函数。现在可以定义我的路由器了,并且this.$router.push(路由)可以工作了。
发布于 2018-06-21 10:26:23
这里的问题在于_.debounce
的使用。doesn函数返回一个要去反跳的新函数,但实际上并不调用任何东西。与目前在searchCharacter
中使用的方式一样,它创建了一个新的去抖动函数,但不会对它做任何事情。
解决这个问题的一种方法是在searchCharacter
外部创建去抖动函数,然后调用它:
@Watch("search")
public searchCharacter(value: any) {
this.debouncedSearchCharacter(value)
}
public debouncedSearchCharacter = _.debounce((value) => {
// for route query
let route: any = {
name: "characters",
}
if (value !== "") {
route.query = {
search: value,
}
}
if (this.$route.name === "characters") {
this.$router.push(route)
}
}, 700)
https://stackoverflow.com/questions/50959281
复制相似问题