Vuejs - getting a querystring value into a component

Question

I have a querystring like this:

https://someurl.com?q=test

And I have a component like so:

Vue.component('externalrecipes', {
props: ['results'],
template: `
    <section>
        <div class="" v-for="result in results">
            <div class="card card-similar card-external text-center">
                <img :src="result.image_url" />
                <div id="meta" class="text-center">
                    <h5>{{ result.title }}</h5>
                    <a target="_blank" :href="'https://www.wine-searcher.com/find/' + q + '/1/uk'" role="button">Buy Wine</a>
                </div>
            </div>
        </div>
    </section>
`
})

However, this isn;t working. I want to be able to pass the value of 'q' in the querystring to this line of code:

<a target="_blank" :href="'https://www.wine-searcher.com/find/' + q + '/1/uk'" role="button">Buy Wine</a>

How would I go about doing that?

No I'm not, I'm still pretty early on in my vue journey and I've not got to routers yet. — Kev
– Kev, Commented Mar 16, 2021 at 8:01
Seems like you have to define q in the context of you component, through a props or a data attribute. — FredG
– FredG, Commented Mar 16, 2021 at 9:14
Either you add a q (or maybe queryId) prop that you init when instantiating your component. Or you use a property of your result item defined through the v-for directive — FredG
– FredG, Commented Mar 16, 2021 at 9:21

FredG · Accepted Answer · 2021-03-19 13:50:05Z

1

You have to define the q variable within the component context. You can do so with props (set the value upon component instantiation) but in your use case it would make sense to retrieve its value from the result object used through the v-for. Check the following snippet for both 'query in props' and 'query in result' examples. You have to know/define where this query value come from. Your results items or the parent component

Vue.component('externalrecipes_props', {
props: ['results', 'query'],
template: `
    <section>
        <div v-for="result in results">
            <div class="card card-similar card-external text-center">
                <img :src="result.image_url" />
                <div id="meta" class="text-center">
                    <h5>{{ result.title }}</h5>
                    <a target="_blank" :href="'https://www.wine-searcher.com/find/' + query + '/1/uk'" role="button">Buy Wine</a>
                </div>
            </div>
        </div>
    </section>
`
});

Vue.component('externalrecipes_result', {
props: ['results'],
template: `
    <section>
        <div class="" v-for="result in results">
            <div class="card card-similar card-external text-center">
                <img :src="result.image_url" />
                <div id="meta" class="text-center">
                    <h5>{{ result.title }}</h5>
                    <a target="_blank" :href="'https://www.wine-searcher.com/find/' + result.query + '/1/uk'" role="button">Buy Wine</a>
                </div>
            </div>
        </div>
    </section>
`
});

new Vue({
  el: '#app',
});

.card {
  display: flex;
  margin: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div>
    <p>Include query in props</p>
    <externalrecipes_props :results="[
      {
        title: 'Some result',
        image_url: 'https://via.placeholder.com/100'
      }]" query="merlot" />
  </div>
  <div>
    <p>Include query in results items</p>
    <externalrecipes_result :results="[
      {
        title: 'Some result',
        image_url: 'https://via.placeholder.com/100',
        query: 'merlot'
      }]" />
  </div>
</div>

edited Mar 19, 2021 at 13:50

answered Mar 16, 2021 at 10:01

FredG

2762 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kev Over a year ago

Thanks Fred, but the top example didn;t work. The second example won;t work because that string isn;t available in the JSON object.

FredG Over a year ago

ok for the top example to work, you need to pass the value to the component when instantiating it <externalrecipes :results="..." queryId="toBeInsertedInQuery" />

Kev Over a year ago

Sorry Fred, that didn;t work either - is there any chance you could create a fiddle for me so I can see whats going on?

Collectives™ on Stack Overflow

Vuejs - getting a querystring value into a component

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related