#javascript #django #vue.js
#javascript #django #vue.js
Вопрос:
У меня есть структура страницы, похожая на эту:
<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. Никаких ошибок или предупреждений.
Ответ №1:
Итак, проблема здесь в вызове new Vue
. Решение — просто удалить app
переменную и переместить разделители для Vue.Extend
вызова.