1

How do you do this?

I need to use a prop in a string, and I thought you did that with ${} but idk.

<MyComponent valueId="12345678" />

MyComponent.vue:

<template>
    <div>
        <iframe src="https://app.com/apikey=12345qwerty&valueid=${valueId}" frameborder="0"></iframe>
    </div>
</template>

Vuejs component props as string

this isn't quite it because this user is asking how to pass a prop as a string....not reference a prop in a string

I also tried

<template>
    <div>
        <iframe src="https://app.com/apikey=12345qwerty&valueid=[valueId]" frameborder="0"></iframe>
    </div>
</template>

So when I google reference a prop type string inside a string vue site stackoverflow.com these are the results

With React prop-types is it possible to validate on whether a string contains something?

Other ways of showing prop-based conditonal text in Vue?

Invalid Prop for Model Name, String Input presented as 'Undefined'

sadly none of these answer my question.

How do you put a prop dynamically into a string?

ok i just tried

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

<template>
    <div>
        <iframe src=`https://app.com/apikey=12345qwerty&valueid=${valueId}` frameborder="0"></iframe>
    </div>
</template>

3:21 error Parsing error: unexpected-character-in-unquoted-attribute-value vue/no-parsing-error 3:76 error Parsing error: unexpected-character-in-unquoted-attribute-value vue/no-parsing-error 3:116 error Parsing error: unexpected-character-in-unquoted-attribute-value vue/no-parsing-error 3:129 error Parsing error: unexpected-character-in-unquoted-attribute-value vue/no-parsing-error 3:130 error Parsing error: unexpected-character-in-unquoted-attribute-value vue/no-parsing-error

✖ 5 problems (5 errors, 0 warnings)

Improve this question
1
  • You're looking for template literals Commented Jul 5, 2022 at 17:05

2 Answers 2

Reset to default
0

If you want a dynamic attribute, you need to insert a : before the attribute like :src, Also you can use template string `` to concatenate the valueId with the URL

<template>
<div>
    <iframe :src="`https://app.com/apikey=12345qwerty&valueid=${valueId}`" frameborder="0"></iframe>
</div>
</template>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

As you are doing String interpolation in the value of iframe src attribute, You have to delimited the whole value with backtick () characters. Please read this official documentation of [Template literals`]2.

Without template literals, when you want to combine output from expressions with strings, you'd concatenate them using the "+" (plus sign).

Hence, few suggestions as per your current code :

  • If valueId will contains dynamic data. Then, pass it like :valueId.

  • iframe src attribute value should be

    <iframe :src="`https://app.com/apikey=12345qwerty&valueid=${valueId}`"></iframe>
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.