CODEWITHSUNDEEP
vue.js
eric
eric

Reputation: 5

How to use query parameter in Vue search box?

I have a page with a search box on it using Vue. What I want to do is this: when a user comes from another page with a parameter in the URL (e.g., myurl.com/?windows), I capture the parameter and populate the search field to run the search on that string when the page loads. If there's no parameter, nothing happens.

I'm capturing the string from the URL with JavaScript, but don't see how to get it in the input to run the search.... I created a method but don't see how to apply it.

<div id="app">
<input type="text" v-model="search" placeholder="Search Articles" />
<div v-for="article in filteredArticles" v-bind:key="article.id" class="container-fluid to-edges section1">
    <div class="row">
         <div class="col-md-4 col-sm-12 section0">
            <div class="section0">
                <a v-bind:href="article.url" v-bind:title="toUppercase(article.title)">
                  <img class="resp-img expand section0"
                     v-bind:src="article.src"
                     v-bind:alt="article.alt"/>
                </a>
            </div>
            <div>
                <h3 class="title-sec">{{ article.title }}</h3>
                <p>{{ article.description }}</p>
          </div>
        </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  var pgURL = window.location.href;
  var newURL = pgURL.split("?")[1];
  console.log(newURL);
</script>


// Filters
Vue.filter('to-uppercase', function(value){
    return value.toUpperCase();
});

new Vue({
  el: "#app",
  data: {
    articles: [
      { id: 1, title: 'Trend Alert: Black Windows', category: 'Windows', description: 'Timeless, elegant, and universally flattering, black is an excellent color to add to any wardrobe – or any window. Get in the black with this chic design trend.', src: 'http://i1.adis.ws/i/stock/Trending_Polaroid_Black_Windows_2018_1?$trending-mobile$', url: '/{StorefrontContextRoot}/s/trending/trend-alert-black-windows', alt: 'Pantone Colors image' },
      { id: 2, title: 'Benefits of a Pass-Through Window', category: 'Windows', description: 'Whether you’re adding a pass-through window in order to enjoy an al fresco aperitif or for easier access to appetizers in the kitchen, we’re big fans of bringing the outdoors in.', src: 'http://i1.adis.ws/i/stock/polaroid_benefitsofapassthroughwindow655x536?$trending-mobile$', url: '/{StorefrontContextRoot}/s/trending/kitchen-pass-through-bar-window', alt: 'Benefits of a Pass-Through Window image' }, etc....
    ],
    search: ''
  },
  methods: {
        toUppercase: function(title){
          return title.toUpperCase();
        },
        urlSearch: function(newURL) {
          if (newURL) {
            return this.search = newURL;
          }
        }
  },
  computed: {
    filteredArticles: function() {
      // returning updated array based on search term
        return this.articles.filter((article) => {
        return article.category.match(new RegExp(this.search, "i"));
      });
    }
  }
})

Upvotes: 0

Views: 380

Answers (1)

Sovalina
Sovalina

Reputation: 5609

You can call the urlSearch method during the mounted hook:

mounted() {
  this.urlSearch(newURL)
},

methods: {
  urlSearch(url) {
    return this.search = url
  }
},

Upvotes: 1

Related Questions