CODEWITHSUNDEEP
vue.js
notthehoff
notthehoff

Reputation: 1242

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

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"

    >

Upvotes: 0

Views: 681

Answers (1)

Deepak
Deepak

Reputation: 1362

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

Upvotes: 1

Related Questions