Question

我使用Vue.js进行双向绑定。

我有一个编辑按钮，可以在单击时将文本字段更改为输入字段。这不像我预期的那样，它不会立即更新dom。

示例：

当我点击编辑按钮时没有任何变化，请点击下面的截图：

但是当我删除另一个图像时，dom会更新，我会根据需要获得输入字段。

我希望任何人都可以帮助我，我现在正努力为此做好准备。

这是我目前的代码：

    <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/vue@2.2.6"></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>

Answer 1

问题是JSON没有编辑属性。

解决方案：

 axios.get(this.url).then((response) => {

                    this.images = response.data.map(function (image) {
                        image.editing = false;
                        return image
                    })

                }, (response) => {

                });

Vue.js dom没有更新.. 2路绑定

1 个答案: