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

Question

我正在 asp.net 使用 Orckestra CMS（在 Composite 之前）和 Razor 模板并尝试使用 Vue 框架。

使用{{option.text}}一切正常

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

但是当我插入 v-bind 属性时，页面被破坏了：

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

渲染页面失败并显示"Error: 'v-bind' is an undeclared prefix."

Answer 1

作为this fiddle shows，vuejs 不是问题。 Razor 模板引擎不知道命名空间 v-bind:，只有 : 无效 xml。你需要把vuejs的命名空间告诉模板引擎。这里是 another stack overflow article 关于将自定义命名空间添加到 Razor 模板引擎。

Answer 2

已解决：问题是 XHTML 验证，对标签、属性等非常严格

排序验证的方法是在< ![CDATA[ "blablabla" ]]>

之间插入代码

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

Answer 3

v-bind 可以在没有 : 的情况下进行绑定，如下所示：

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

等于

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

比照。 Vue.js#v-bind

Answer 4

也许为时已晚，但对于那些搜索的人，我找到了很好的解决方案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.

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

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

html

binding

composite

web

vue.js