VUE beginners and Js operating step referred pit method Json

VUE stepped pit beginner in mind

A, vue view the version of the method

Most are open cmd-line input Vue -V, but this is not the version of Vue cli version of Vue@vue/cli 4.2.2

The correct command is entered in the project directory npm list vue, returns 项目名 + 项目版本 + 路径 + -- [email protected]for the version @ vue,

I do not know why the case is not in the project directory finding out I remember my vue also want to have a global installed a big brother can tell.

二、[Vue warn]:You may have an i vue.runtime.esm.js?xxxx nfinte update loop in a component render function.

Baidu search for the infinite loop error but did not want to own a write error listener class and first input something with iview UI component library input label very slow only to look to find out the reason for the search was finally a video b station Vue中踩过的坑 【infinite update loop】where is an array speaking [^ sort] ascending descending sorting method used in the original array directly

I generally understand (not a guarantee):

The method is to change the sort function array ascending (ascItems) Descending sorting function (descItems) trigger on the original array (data in items) will change the array into two functions infinite loop causing this error is the following part of the code (Code video ascending the authors did not record on it should be so written)

<span>降序</span>
<span v-for="(item,index) in descItems"
      :key="'desc' + index"
      ></span>

<span>升序</span>
<span v-for="(item,index) in ascItems"
      :key="'asc' + index"
      ></span>

data(){
    return{
        items:[
            {no: 1, name: "红", color: "red"},
            {no: 2, name: "绿", color: "green"},
            {no: 3, name: "蓝", color: "blue"},
        ]
    }
}
computed:{
    descItems(){
        return this.items.sort((a,b)->{
            return b.no - a.no
        })
    },
    ascItems(){
        return this.items.sort((a,b)->{
            return a.no - b.no
        })
    }
}

Solution:

The this.items changed [... this.items] array using the original copy operation

The strange thing is I use a sort method to sort an infinite loop will not know for what reasons the copy operation is not infinite loop following is the code can be informed of the reasons chiefs hope

html

<div v-for="(item,index) in sortitem(items)" :key="index"></div>

js

methods:{
    sortitem:function(itemlist){
        return itemlist.sort(this.up)
    }
    up:function(a,b){
        return a.id - b.id
    }
}

Three, Js generating / operation Json

Not quite be what pit recording method have an easier way to welcome comments

export default new Vuex.Store({
    state:{
        datalist:[],
        datajson:{},
        temporary:{},
    }
})

Object sets the object / object Add Child

var _str = "Xiaoming"
var _obj = {"val":_str}
state.temporary.name = _obj
state.datajson = state.temporary

输出结果 {"name":{"val":"Xiaoming"}}

Object Object sets of sets of sets of objects list / object Add Child Add Child Adds an array / list Add Child

var _str = "Xiaoming"
var _obj = {"val":_str}
state.datalist.push(_obj)
_str = "Xiaohong"
state.datalist.push(_obj)
state.temporary.classes = {"list":state.datalist}
state.data.json = state.temporary

输出结果为 {"name":{"val":"Xiaoming"},"classes":{"list":[{"val":"Xiaoming"},{"val":"Xiaohong"}]}}

Less likely to know the terminology to describe also welcome comments together learn together is such a help to you recommend a collection point