Javascript 当涉及Jekyll时，VueJS插值不会渲染

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

这是我的HTML：

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

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

---

我做错了什么，名称没有呈现？

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

在本例中，jekyll将标记解析为空字符串，后来vue继续，但没有找到任何内容

其他容易发生冲突的发动机：

杰基尔 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>

---

花括号冲突

如果希望jekyll不使用Vue的括号，可以使用原始标记：

---

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

。你可能换过电话了吗？@Phil，就是这样。我通过Jekyll运行它，它使用把手，因为每个人都使用。杰基尔正试图解决插值问题，并没有留下任何东西让Vue来处理。更改分隔符实际上解决了这个问题。我对问这个问题感到非常尴尬。@JeffereyCave我已经用它做了标记，以便其他人可以找到它。请随意添加您自己的答案谢谢，这是一个优雅的答案。我真的不想更改引擎的任何分隔符。

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>