js\vue 在数组中动态插入对象和添加修改某一个对象的属性值

<template>

  <div>

    <div

      v-for="item in list"

      :key="item.id"

      class="div"

      @click="handleFn(item)"

    >

      {{ item.name }}

    </div>

    <br />

    <!--:key="`${item.value}_${index}`"是为了 v-for循环里绑定的key出现报错问题 -->

    <div

      v-for="(item, index) in hotList"

      :key="`${item.value}_${index}`"

      class="div"

    >

      {{ item.name }}

    </div>

  </div>

</template>

<script>

export default {

  data() {

    return {

      list: [

        { id: 1, name: "one" },

        { id: 2, name: "two" },

        { id: 3, name: "three" },

        { id: 4, name: "four" },

        { id: 5, name: "five" },

      ],

      hotList: [],

    };

  },

  methods: {

    handleFn(setObj) {

      this.hotList = JSON.parse(localStorage.getItem("hotList")) || [];

      if (setObj) setObj.num = 0; //给setObj对象添加num属性，同时赋值

      function setFn(newList, setObj) {

        newList.length ? newList : newList.push(setObj);

        for (let index = 0; index < newList.length; index++) {

          // 判断当前遍历到对象的id属性值是否等于setObj中的id,

          // 如何数组中的对象不存在该id，则向数组插入setObj,同时num=1

          newList[index].id === setObj.id

            ? newList[index].num++

            : newList.push({ ...setObj, num: 1 });

        }

        // 根据不同对象中的num值大小，对数组重新排序

        newList.sort((a, b) => b.num - a.num);

        return newList;

      }

      this.hotList = setFn(this.hotList, setObj);

      localStorage.setItem("hotList", JSON.stringify(this.hotList));

    },

  },

};

</script>

<style>

.div {

  width: 100px;

  border: 1px solid black;

}

</style>