为什么v模型在vue.extend中使用时不起作用

Question

我有一个类似的页面结构：

<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对象中显示值。没有错误或警告。

Answer 1

所以这里的问题是调用new Vue。解决方案只是删除app变量并将分隔符移动到Vue.Extend调用。