vue2.6.11 array push sometimes not reactive

Viewed 82

I have declare items in data,after I set this.items=data||[] in method getItemData() then I call addItem,but sometimes DOM not update.

I see items data by vueDevtools,its no problem. I have try change this.items=data||[] to this.$set(this,'items',data),but not work.

UI and vuedevtools data

        <div
          v-for="(item,itemIndex) in items"
          :key="item.id||item.vueKey">
          <div>
            <el-button
             type="primary"
              @click="saveItem(item)">
              save
            </el-button>
          </div>
    </div>

<script>
  export default {
    data() {
      return {
        items: [],
      };
    },
    methods: {
      getItemData() {
        this.$http
          .get("integrationItems?integrationId=" + this.model.id)
          .then(({data}) => {
            this.items = data || [];
          });
      },
      addItem() {
        this.items.push({
          vueKey: this.$util.genKey(),
          integrationId: this.model.id,
          params: {},
        });
      },
      saveItem(item) {
        this.$http.save("integrationItems", item).then(() => {
          this.$message.success("保存成功");
          this.getItemData();
        });
      },
    },
  };
</script>
0 Answers
Related