Vue: 【BUG】 v-for not work fine with jQuery.merge method

Created on 28 Apr 2016 · 10Comments · Source: vuejs/vue

<ul>
<li v-for="val in vueArr"></li>
</ul>

This is not woiking:

vue.vueArr = $.merge(vue.vueArr, myArr);

This is working fine:

$.each(myArr, function(i, v) {
        vue.vueArr.push(v);
 });

Source

yyxx9988

👎1

Most helpful comment

$.merge may not be returning a different copy of the original array. Use concat instead.

yyx990803 on 28 Apr 2016

👍2

All 10 comments

Really?

EDIT For the future participants, this bug was empty....

ludo237 on 28 Apr 2016

😄1

...

yyxx9988 on 28 Apr 2016

@phanan @ludo237 Please re-open it , Thanks!

yyxx9988 on 28 Apr 2016

@duruitang What are you trying to achieve?
It looks to me as you are trying to put data into a vue structure. Why aren't you using the data or props attribute?

@phanan @ludo237
Unless you know duruitang, it seems rude to me to ridicule/close his issue without the least attempt to help him, as he seems to be a beginner. At least point him to the gitter channel or the forum

nirazul on 28 Apr 2016

@Nirazul This issue started with "BUG" as the title and an empty body, so I closed it thinking it was a spam/troll. @duruitang then edited it and filled the details in, and I reopened it. And yes I'm trying to reproduce the bug while we're talking.

phanan on 28 Apr 2016

👍1

@Nirazul Sorry, this is all my fault. I myself pressed confirm key when I just opened this issue. Please don't blame @phanan . I am so sorry to bother you.

yyxx9988 on 28 Apr 2016

http://api.jquery.com/jquery.merge/

See the last section:

Merges two arrays, but uses a copy, so the original isn't altered.

var first = [ "a", "b", "c" ];
var second = [ "d", "e", "f" ];
$.merge( $.merge( [], first ), second );

P.S. why not use a simple concat here?

egoist on 28 Apr 2016

👍1

@egoist But I use vue.vueArr = $.merge(vue.vueArr, myArr); Is vue.vueArr not altered , too?

This is my code:

<template v-if="camp.shown">
    <div v-for="v in camp.data" class="weui_panel weui_panel_access">
        <div class="weui_media_bd">
            <h4 class="weui_media_title">${ v.title }</h4>
            <p class="weui_media_desc">目的地：${ v.destination }</p>
            <p class="weui_media_desc">时间：${ v.leaving_time }</p>
        </div>
    </div>
</template>

<script>
    $(function () {
        new Vue({
            el: '#document-body', // <body id="document-body">
            data: {
                camp: {
                    shown: false,
                    apiUrl: '/api/order/camps',
                    data: [],
                    page: 1,
                    limit: 10,
                    loadMore: true
                }
            },
            ready: function () {
                var _this = this;

                _this.initMod('camp'); // 初始化camp
            },
            methods: {

                initMod: function (mod) {
                    var _this = this;

                    // 重置
                    _this[mod].shown = false;
                    _this[mod].data = [];
                    _this[mod].page = 1;
                    _this[mod].loadMore = true;

                    // 请求数据
                    GLOBAL.weui.show_loading();
                    $.ajax({
                        url: _this[mod].apiUrl,
                        type: 'get',
                        timeout: 6*1000,
                        data: {page: _this[mod].page, limit: _this[mod].limit},
                        dataType: 'json',
                        complete: function () {
                            GLOBAL.weui.hide_loading();
                        },
                        success: function (res) {
                            if (res.ret == 1) {
                                _this[mod].data = res.data;
                                if (res.data.length < _this[mod].limit) {
                                    _this[mod].loadMore = false;
                                } else {
                                    _this[mod].page += 1;
                                }
                                _this[mod].shown = true;
                            } else {
                                GLOBAL.weui.show_alert(res.msg);
                            }
                        },
                        error: function() {
                            GLOBAL.weui.show_alert('请求数据出错');
                        }
                    });
                },

                // 加载更多数据
                loadMore: function(mod) {
                    var _this = this;
                    GLOBAL.weui.show_loading();

                    $.ajax({
                        url: _this[mod].apiUrl,
                        type: 'get',
                        timeout: 6*1000,
                        data: {page: _this[mod].page, limit: _this[mod].limit},
                        dataType: 'json',
                        complete: function () {
                            GLOBAL.weui.hide_loading();
                        },
                        success: function (res) {
                            if (res.ret == 1) {
                                if (res.data.length < _this[mod].limit) {
                                    _this[mod].loadMore = false;
                                } else {
                                    _this[mod].page += 1;
                                }

                                // This is working
                                $.each(res.data, function(i, v) {
                                    _this[mod].data.push(v);
                                });

                                // This is not working
//                              _this[mod].data = $.merge(_this[mod].data, res.data);

                            } else {
                                GLOBAL.weui.show_alert(res.msg);
                            }
                        },
                        error: function() {
                            GLOBAL.weui.show_alert('请求数据出错');
                        }
                    });
                }
            }
        });
    });
</script>

I marked This is working & This is not working at methods section, please check it.

yyxx9988 on 28 Apr 2016

$.merge may not be returning a different copy of the original array. Use concat instead.

yyx990803 on 28 Apr 2016

👍2

@phanan Sorry, I didn't think of this possibility. I've just seen a strange, but plausible question :D

nirazul on 28 Apr 2016

Was this page helpful?

0 / 5 - 0 ratings