当涉及 Jekyll 时，VueJS 插值不呈现

Question

由于某些原因，VueJS 中的字符串插值没有像我预期的那样工作。

这是我的 HTML:

 <ul id='books'>
  <li v-for="row in results.rows">
   <span v-html="row.name"></span> --
   {{ row.name }}
  </li>
 </ul>

...和我的 javascript 文件...

state.elements.bookList = new Vue({
    el: '#books',
    data:{
        db:state.db,
        results:{
            offset:0,
            total_rows:0,
            rows:[
                {name:'bob'},
                {name:'joe'},
            ]
        }
    }
});

渲染时，我在列表中得到了预期的两个项目；但是插值不起作用。作为测试，我添加了 v-html 绑定，它确实呈现了预期的名称。

名字没有呈现是我做错了什么？

Answer 1

这是模板引擎冲突的问题：jekyll 和 vuejs。在这两种情况下，数据标签都用大括号标识。

在这种情况下，jekyll 将标签解析为空字符串，后来 vue coes 并没有找到任何东西。

其他可能（很容易）发生冲突的引擎：

杰基尔
VueJS
小胡子
车把

要解决此问题，需要更改其中一个模板引擎的分隔符：

state.elements.bookList = new Vue({
    el: '#books',
    delimiters: ['[[', ']]'],
    data:{
        db:state.db,
        results:{
            offset:0,
            total_rows:0,
            rows:[
                {name:'bob'},
                {name:'joe'},
            ]
        }
    }
});


 <ul id='books'>
  <li v-for="row in results.rows">
   <span v-html="row.name"></span> --
   [[ row.name ]]
  </li>
</ul>

Answer 2

大括号冲突。

如果你想让 jekyll 单独留下你的 Vue 的括号，你可以使用 raw 标签：

{% raw %}{{ row.name }}{% endraw %}

当涉及 Jekyll 时，VueJS 插值不呈现

VueJS interpolation does not render when Jekyll involved

javascript

jekyll

vuejs2