Vue.js value bind with prefix and suffix

Question

I tried binding a value to an input using a variable that has been declared in the data object, but I also need to add a prefix and a suffix

<input id="topnavback", v-bind:value="rgb({{themestopnavback}})", class="jscolor"/>

The value themetopnavback is the value defined in data and I want to put the rgb with bracktes around it.

But this always causes the whole page not to render the DOM which only occurs if you try to access a Vue variable which isn't existing in the data object. Is this just wrong or isn't it possible to bind a value with additional strings?

Thanks in advance

That also won't let the DOM render...are you sure that vue should recognize that expression? — Blade
– Blade, Commented Mar 27, 2017 at 17:51
Is rgb defined on your Vue? Is themestopnavback? Show your Vue. — Bert
– Bert, Commented Mar 27, 2017 at 17:53
No, themestopnavback is defined there, not rgb. The value of themestopnavback only contains the numbers that needs to be in brackets with the rgb in front of it. Also, my Vue is pretty big, I don't think it would make sense to post all of it here, but I defined it correctly, that's for sure. — Blade
– Blade, Commented Mar 27, 2017 at 17:59

Bert · Accepted Answer · 2017-03-27 18:03:05Z

3

v-bind:value="'rgb(' + themestopnavback + ')'"

answered Mar 27, 2017 at 18:03

Bert

82.6k17 gold badges205 silver badges166 bronze badges

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

Collectives™ on Stack Overflow

Vue.js value bind with prefix and suffix

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