Блог

У меня есть структура страницы, похожая на эту:

 <main id="app">
  <div id="mount-place"></div>
</main>
<script type="text/x-template" id="my-template">
  ...some code here...
  <input type="text" v-model="address">
  ...some other code here...
</script>
<script>
var ExtendedElement = Vue.Extend({
  template: '#my-template',
  data: function() {
    return {
      address: {{ some_address|safe }};  // gets values from django
    }
  },
  mounted: function() {
    console.log(this.address);  // Works just fine
  }
});
new ExtendedElement().$mount('#mount-place');
</script>
...some unimportant logic here...
<script>
const app = new Vue({
  delimiters: ['[[', ']]'],
  el: '#app'
});
</script>
  

И проблема в том, что он отлично отображается, но v-model не работает, т.Е. Ввод ничего не показывает. При доступе к нему через консоль он показывает значения внутри объекта vue. Никаких ошибок или предупреждений.

Итак, проблема здесь в вызове new Vue . Решение — просто удалить app переменную и переместить разделители для Vue.Extend вызова.