v-bind error:v-bind' is an undeclared prefix

Question

I'm working in asp.net with Orckestra CMS (before Composite) and Razor Templates and trying to use Vue framework.

All is fine when using {{option.text}}

<select class="form-control" id="myExample1">
     <option v-for="option in options">{{option.text}}</option>
</select>

But when I insert v-bind attribute, the page is broken:

<select class="form-control" id="myExample1">
     <option v-for="option in options" v-bind:value="option.value">{{option.text}}</option>
</select>

Rendering page fail and show "Error: 'v-bind' is an undeclared prefix."

I'm not experienced with ASP.net, but did you try to use shorter way for binding ? `:value="option.value"` ? — Belmin Bedak, Jan 26 '17 at 14:57
@BelminBedak i try also use shorter way and I have this: Error: Name cannot begin with the ':' character, hexadecimal value 0x3A. — Ezequiel Fdeil, Jan 26 '17 at 15:19
@EzequielFdeil Welcome to [so]! Note that the system already has a way to mark questions as solved, and does so when you *accept* an answer. (Thank you for doing so!) — jpaugh, Feb 05 '18 at 18:56

kai2k · Answer 1 · 2020-07-26T14:35:56.013

Maybe it's too late, but for those who searching, I found good solution from here:

Well-formed XML cannot use the : and @ shortcuts for v-bind: and v-on:. And in XML these attributes are interpreted as namespace names.

To use the v-bind: and v-on: syntax in XML (e.g. XSLT files), add these as dummy namespaces in the XML, e.g.
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
 xmlns:v-bind="https://vuejs.org/v2/api/#v-bind"
 xmlns:v-on="https://vuejs.org/v2/api/#v-on">
Then also add the dummy xmlns:v-bind to the <html> element of the output – otherwise the definitions will be repeated everywhere.

score 3 · Answer 2 · edited Jul 15 '22 at 22:06

3

v-bind can bind without : like below:

<option v-for="option in options" v-bind="{value: option.value}">{{option.text}}</option>

is equals

<option v-for="option in options" v-bind:value="option.value">{{option.text}}</option>

cf. Vue.js#v-bind

edited Jul 15 '22 at 22:06

tony19

125,647
18
229
307

answered Feb 02 '18 at 09:11

peccu

641
5
18

score 0 · Answer 3 · edited May 23 '17 at 12:16

0

It's not a problem about vuejs as this fiddle shows. The Razor Template engine does not know the namespace v-bind: and only : is invalid xml. You need to tell the template engine about the namespaces of vuejs. Here is another stack overflow article about adding custom namespaces to Razor template engine.

edited May 23 '17 at 12:16

Community

1
1

answered Jan 27 '17 at 10:39

Nicolas Heimann

2,561
16
27

Thankyou for answer! Now, the cuestion is: Where I found the namespace of Vuejs? I need create this? – Ezequiel Fdeil Feb 01 '17 at 23:38
I linked another SO topic about this. I'm not pretty sure how to deal with the situation since i have never used ASP.net/that template engine. – Nicolas Heimann Feb 02 '17 at 00:16

score 0 · Accepted Answer · edited Feb 05 '18 at 18:57

0

SOLVED: The problem is the XHTML validation, is very strict with tags, attributes, etc.

The way to sort this validation is inset the code between < ![CDATA[ "blablabla" ]]>

<select class="form-control" id="myExample1">
<![CDATA[     
<option v-for="option in options" v-bind:value="option.value">{{option.text}}</option>
  ]]>
</select>

edited Feb 05 '18 at 18:57

jpaugh

6,634
4
38
90

answered Feb 03 '17 at 17:12

Ezequiel Fdeil

51
2
8

v-bind error:v-bind' is an undeclared prefix

4 Answers4

Linked