<div id="app">
<p>{{message}}</p>
<button v-on:click="getRemoteMessage">Inside Button</button>
</div>
<button onclick="clickButton()">Outside Button</button>
var vm = new Vue({
el: '#app',
data: {
message: "This is local data.",
},
methods: {
getRemoteMessage() { // 2. trigger event in Vue instance
Promise.resolve("Get remote data by inside button.") // 3. Get data asynchronously
.then((res) => { // 4. Return result
this.message = res; // 5. Change View Model
});
},
},
});
function clickButton() { // 2. trigger event in Vue instance
Promise.resolve("Get remote data by outside button.") // 3. Get data asynchronously
.then((res) => { // 4. Return result
vm.message = res; // 5. Change View Model
});
}
This Pen doesn't use any external CSS resources.