V-bind 错误:V-bind' 是未声明的前缀



我正在使用Orckestra CMS(在Composite之前)和Razor Templates进行 asp.net 工作,并尝试使用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>

呈现页面失败并显示"错误:"v-bind"是未声明的前缀。

也许为时已晚,但对于那些搜索的人来说,我从这里找到了很好的解决方案:

格式正确的 XML 不能使用:@快捷方式进行v-bind:v-on: .在 XML 中,这些属性被解释为命名空间名称。

要在 XML 中使用v-bind:v-on:语法(例如 XSLT 文件),请添加这些作为 XML 中的虚拟命名空间,例如

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

然后将虚拟<html> xmlns:v-bind添加到输出 – 否则定义将在任何地方重复。

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

正如这把小提琴所显示的那样,vuejs 不是问题。Razor 模板引擎不知道命名空间v-bind:,只有 : 是无效的 xml。你需要告诉模板引擎关于 vuejs 的命名空间。这是另一篇关于将自定义命名空间添加到 Razor 模板引擎的堆栈溢出文章。

已解决:问题是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>

最新更新