I’m trying to use Vue to update my static HTML. What I need is to update some elements (say, change the inner HTML, or icon, or some part of it), and add a new one to the DOM. My requirement is to use templates for adding a new element because creating is dynamically with JS is tedious as they could be complicated.
Here is my code that updates the element “counter”:
<!DOCTYPE html>
<html>
<head>
<title>Counter</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div class="list">
<div class="counter" id="a">5</div>
</div>
<button>update</update>
<script>
new Vue({
el: '#a',
data: {
counter: 5
},
mounted() {
this.counter = 10;
},
template: '<div>{{ counter }}</div>'
});
</script>
</body>
</html>
- How to change it to add a new “counter” element to the “list”?
- How to change it to update the existing counter with the button click and without completely rewriting it?