VueJS интерполяция не рендерится, когда задействован Джекилл - PullRequest
Новая
       10

VueJS интерполяция не рендерится, когда задействован Джекилл

0 голосов
/ 21 ноября 2018

По какой-то причине интерполяция строк в 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, и она отображает ожидаемое имя.

Что я делаю неправильно, если имя не отображается?

Ответы [ 2 ]

0 голосов
/ 21 ноября 2018

Конфликт фигурных скобок.

Если вы хотите, чтобы jekyll оставил скобки Vue в покое, вы можете использовать тег raw:

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

0 голосов
/ 21 ноября 2018

Это проблема конфликтующих шаблонизаторов: 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>
...