How to interpolate a variable into a nested component in Vue?

Question

I have an app that has components nested inside. The app is called on the filter id. I have a data element named minTotalSpent. Currently, this contains "3" in the app. The first placement on the page displays appropriately. When I try to pass it in as a variable into vue-slider, however, it does not like it and throws an "invalid expression"warning on the counsel and does not respect the minimum.

<div id="filter">
  <form id="search">
    Search <input name="query" v-model="searchQuery">
  </form>
  {{minTotalSpent}}
  <div class="filter-container-slider">
    <vue-slider
    :min="{{minTotalSpent}}"
    :max="42"
    :value="2"

    >

like @thanksd said. because as soon as you use the :, Vue knows that what's in the quotes is an expression, so you don't use the double curly braces. — MauroPerez
– MauroPerez, Commented Apr 27, 2017 at 15:16

tony19 · Accepted Answer · 2022-07-15 04:50:54Z

1

Just elaborating as per @thanksd's answer.

When using any component, over here vue-slider component, if you use v-min = "..." or :min = "...", the value of v-min or :min is in a javascript expression and you cannot use mustaches inside javascript expression.

And when it comes to html attributes like id on any element, you should be using v-bind.

<div v-bind:id="dynamicId"></div>

Read more about them here: https://v2.vuejs.org/v2/guide/syntax.html#Attributes

edited Jul 15, 2022 at 4:50

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Apr 28, 2017 at 4:43

Deepak

1,36212 silver badges20 bronze badges

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

Collectives™ on Stack Overflow

How to interpolate a variable into a nested component in Vue?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related