在vue按钮中显示所选城市

Question

有组件:

<div class='regions-list'>
<button @click='toggle = !toggle'>{{ selected }}</button>
<div class='regions-list__popup' v-if='toggle'>
<i class='regions-list__close si si-cross' @click='closePopup'></i>
<div class='regions-list__title'>City</div>
<div class='regions-list__form-search'>
<input
class='regions-list__search'
type='text'
placeholder='Looking for...'
v-model='searchQuery'
/>
<button class='regions-list__search-btn'>
<span class='si si-search'></span>
</button>
</div>
<a v-for='item in resultQuery' :key='item.seo_name' :href='item.link' class='regions-list__name' @click='selectLink(item.name)'>{{
item.name
}}</a>
</div>
</div>

vue:和

export default {
props: {
region: {
type: Array,
default: () => []
}
},
data() {
return {
toggle: false,
searchQuery: null,
selected: 'Selected'
};
},
computed: {
resultQuery() {
if (this.searchQuery) {
return this.region.filter(item => {
return this.searchQuery
.toLowerCase()
.split(' ')
.every(v => item.name.toLowerCase().includes(v));
});
} else {
return this.region;
}
}
},
methods: {
closePopup() {
this.toggle = false;
},
selectLink(link) {
this.selected = link;
}
}
};

选择城市时，需要在按钮中显示。这可能吗?(似乎我需要使用存储)选择保存在{{ Selected }}变量中，但在切换到另一个页面时消失。我们能做些什么呢?

Answer 1

所以就像@Frnak评论的那样，你可以从链接中删除href:

const app = new Vue({
el: '#app',
props: {
region: {
type: Array,
default: () => []
}
},
data() {
return {
resultQuery: [
{seo_name: 1, name: 'link 1', link: 'link 1'}, 
{seo_name: 2, name: 'link 2', link: 'link 2'}, 
{seo_name: 3, name: 'link 3', link: 'link 3'}, 
{seo_name: 4, name: 'link 4', link: 'link 4'}
],
selected: 'nothing selected',
toggle: false,
searchQuery: null,
} 
},
computed: {
/*resultQuery() {
if (this.searchQuery) {
return this.region.filter(item => {
return this.searchQuery
.toLowerCase()
.split(' ')
.every(v => item.name.toLowerCase().includes(v));
});
} else {
return this.region;
}
}*/
},
methods: {
closePopup() {
this.toggle = false;
},
selectLink(link) {
this.selected = link
this.closePopup()
}
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class='regions-list'>
<button @click='toggle = !toggle'>{{ selected }}</button>
<div class='regions-list__popup' v-if='toggle'>
<i class='regions-list__close si si-cross' @click='closePopup'></i>
<div class='regions-list__title'>City</div>
<div class='regions-list__form-search'>
<input
class='regions-list__search'
type='text'
placeholder='Looking for...'
v-model='searchQuery'
/>
<button class='regions-list__search-btn'>
<span class='si si-search'></span>
</button>
</div>
<a v-for='item in resultQuery' :key='item.seo_name' class='regions-list__name' @click='selectLink(item.name)'>{{
item.name
}}</a>
</div>
</div>
</div>