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

问题

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."

回答1:

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

回答2:

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.

回答3:

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>

来源：https://stackoverflow.com/questions/41875921/v-bind-errorv-bind-is-an-undeclared-prefix

标签

html

binding

web

Vue.js

composite