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提示并没有找到任何内容。

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

Jekyll
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插值不呈现

2 个答案: