I need to pass a dynamic variable into v-if attribute. I tried multiple ways but it doesn't produce the expected result.

So far, I have this: v-if="customDropdown === {{row.name}}"

How can I conditionally and dynamically render the element, please? Thank you in advance.

I need to pass a dynamic variable into v-if attribute. I tried multiple ways but it doesn't produce the expected result.

So far, I have this: v-if="customDropdown === {{row.name}}"

How can I conditionally and dynamically render the element, please? Thank you in advance.

• javascript
• vue.js

• Don't use interpolation... v-if="customDropdown == row.name" – Dawid Zbiński Commented Nov 28, 2018 at 7:09
• @DawidZbiński , It helped! Thanks :) – Kanagaraj Subramaniam Commented Nov 28, 2018 at 7:23
• Added it as an answer, would appreciate marking it as correct. – Dawid Zbiński Commented Nov 28, 2018 at 7:51

4 Answers 4

You cannot use interpolation in Vue directives/attributes.

To bind to v-if or v-for use variables directly:

<div v-if="value.someProperty"></div>

To bind to other attributes/properties use v-bind: or shorthand : as follows:

<div :directive="value"></div>

Template Syntax documentation

You need binding the row.name to data object in vue:

export default { data() { return { customDropdown: 'something', row: {name: 'something'}, } } }

and then use it in the v-if statement:

<div v-if="customDropdown == row.name">You see me if customDropdown is equal to row.name</div>

First, you cannot interpolate directives/attributes and second, it's not clear, but I think you want to check the condition while iterating by a array.

You can use the template structure below:

<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div
    v-for="row in arrayList"
    v-if="customDropdown === row.name"
    >
    Show row content: {{ row }}
  </div>
</div>

With the data structure below to achieve you goal:

new Vue({
  el: '#app',
  data: {
    customDropdown: 'first',
    arrayList: [
      {
        name: 'first',
      },
      {
        name: 'second',
      },
     ],
  },
})

Just use the properties name,

For example

export default {
 data() {
    return {
       var: true 
     }
  }
}

html

<span v-if="var">I only appear when the condition is true</span>