Home » vue » Displaying the selected city in the vue button

Displaying the selected city in the vue button

Posted by: admin November 26, 2021 Leave a comment

Questions:

Have the component:

  <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>

and 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;
   }
  }
 };

When choosing a city, need to display it in the button. Is it possible? (seems like i need to use storage)
The selection is saved in the {{ Selected }} variable, but disappears when switching to another page. What can be done?

Answers:

So like @Frnak commented you can just remove href from link:

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>