The very first Vue.js example
HTML
<script src="https://unpkg.com/[email protected]"></script>
<div id="demo">
<p>This message must reflect value of input1</p>
<div>
{{ computedMessage }}
</div>
input1: <input type="text" v-model='message'>
<div>
<p>This will cause computed message to reflect input2</p>
input2: <input type="text" v-model='someText'>
<button @click='overrideComputed'>Override</button>
</div>
</div>
JavaScript
var demo = new Vue({
el: '#demo',
data () {
return {
message: 'I am a great guy',
messageProxy: null,
someText: ''
}
},
computed: {
computedMessage: {
get () {
let messageProxy = this.messageProxy
this.messageProxy = null
console.log(messageProxy, this.messageProxy, this.message)
return messageProxy || this.message
},
set (val) {
this.messageProxy = val
}
}
},
methods: {
overrideComputed () {
this.computedMessage = this.someText
}
}
})