I'm currently utilizing Vue.js for implementing two-way binding.
One issue I am facing is with an edit button that should convert a text field into an input field upon clicking. However, the DOM does not update immediately as expected.
For instance:
When I click on the edit button, there are no visible changes. Refer to the screenshot below:
https://i.stack.imgur.com/ir4oP.png
However, when I remove the other image from the screen, the DOM updates and displays the input field as desired.
https://i.stack.imgur.com/QqhU4.png
I would appreciate any assistance with this problem as I have been struggling with it for quite some time now.
This is my current code snippet:
<div class="row" id="app">
<div v-for="image in images" class="col-md-3">
<div class="well">
<div class="card">
<div class="text-center">
<img class="card-img-top"
:src="image.data"
alt="Card image cap"
height="100">
</div>
<div class="card-block">
<template v-if="image.editing">
<h4 class="card-title">
<input type='text' v-model="image.title" class="form-control input-sm">
</h4>
</template>
<template v-else>
<h4 class="card-title">Image title</h4>
</template>
<p class="card-text">Some quick example text to build on the card title and make up
the
bulk of the card's content.</p>
<template v-if="image.editing">
<a @click.prevent="update(image)" href="#" class="btn btn-primary">
<i class="fa fa-floppy-o"></i>
</a>
<a @click.prevent="cancel(image)" class="btn btn-default" href="#">
<span class="btn-label-icon left fa fa-ban"></span>
</a>
</template>
<template v-else>
<a @click.prevent="edit(image)" href="#" class="btn btn-info"><i
class="fa fa-pencil"></i></a>
<a @click.prevent="destroy(image)" href="#" class="btn btn-danger">
<i class="fa fa-trash"></i>
</a>
</template>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="94e2e1f1d4a6baa6baa">[email protected]</a>"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
url: '/users/<%= user._id %>/images?token=<%= user.token %>',
image: {},
images: []
},
mounted: function () {
this.fetch();
},
methods: {
fetch(){
axios.get(this.url)
.then(function (response) {
this.images = response.data;
}.bind(this));
},
edit(image){
image.editing = true;
},
toggle(){
},
destroy(image){
axios.delete('/users/<%= user._id %>/images/' + image._id + '?token=<%= user.token %>')
.then((response) => {
this.images.splice(this.images.indexOf(image), 1);
}, (response) => {
});
},
update(image){
},
cancel(image){
image.editing = false;
}
}
})
</script>