CODEWITHSUNDEEP
vuejs2pug
Kirill Murashkin
Kirill Murashkin

Reputation: 301

How to pass pug variables into vue dynamic attributes?

The problem is that I can't pass dynamic Pug variables to Vue component via attributes, if they're of "String" type. Vue considers the string that I'm trying to pass as a name of Vue property.

The problem

template.pug

- var pugVariable = 'John';

my-component(v-bind:name= pugVariable)
*MyComponent.Vue* 
export default {
  name: 'MyComponent',

  props: {
    name: {
      type: String
    }  
  }
}

I get an error: "Property or method "John" is not defined on the instance but referenced during render.", which means, as far as I understand, that Vue considers string that is in pugVariable as a name of Vue property.

The question

So, the question is: now to persuade Vue to treat this variable as a string?

What I've already tried:

I tried to pass an object literal instead of string, as follows:

my-component(v-bind:name= {value: pugVariable})
It works, but we lose the ability to check the type of passed value, so I don't like this solution.

Upvotes: 2

Views: 2479

Answers (1)

Kirill Murashkin
Kirill Murashkin

Reputation: 301

I've got an answer earlier that whoever:)

As described here https://stackoverflow.com/a/45175556/7473709, in case if we want just to pass static string, we have to simply get rid of v-bind: prefix, so it looks like as follows:

my-component(name= {value: pugVariable})

Upvotes: 1

Related Questions