vue莫名其妙改变值,求大神解答,急急急

Question

<template>
  <div>
    <tree-transfer :title="title" :from_data='fromData' :to_data='toData' :defaultProps="{label:'label'}" @addBtn='add'
      @removeBtn='remove' :mode='mode' filter>
    </tree-transfer>
    <!-- 权限设置 -->
    <div>
      <h4>设置权限</h4>
      <el-table :data="setUserperm" height="250" border style="width: 100%">
        <el-table-column prop="label" label="姓名">
        </el-table-column>
        <el-table-column label="是否可以上传文件">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.has_upload_permission" active-text="是" inactive-text="否">
            </el-switch>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <h4>会议主持人</h4>
      <el-select v-model="speaker" filterable placeholder="请选择">
        <el-option v-for="item in setUserperm" :label="item.username" :value="item.user" :key="item.user">
        </el-option>
      </el-select>
    </div>
    <el-button type="primary" style="margin-top: 12px;" @click="next">下一步</el-button>
  </div>
</template><script>
import treeTransfer from "el-tree-transfer"; // 引入export default {
  data() {
    return {
      title: ["用户组人员", "选中人员"],
      mode: "transfer", // transfer addressList
      fromData: [],
      toData: [],
      setUserperm: [],
      // 演讲人
      speaker: "",
      meetingId: localStorage.getItem("AlterMeetId")
    };
  },
  methods: {
    // 切换模式 现有树形穿梭框模式transfer 和通讯录模式addressList
    changeMode() {
      if (this.mode == "transfer") {
        this.mode = "addressList";
      } else {
        this.mode = "transfer";
      }
    },    // 监听穿梭框组件添加
    add(fromData, toData, obj) {
      console.log("开始");
      console.log(this.setUserperm);
      let tempArr = [];
      toData.forEach(item => {
        item.children.forEach(itemChild => {
          this.$set(itemChild, "has_upload_permission", true);
          this.setUserperm.forEach((lastItem, index) => {
            if (itemChild.id.split("-")[1] == lastItem.id.split("-")[1]) {
              console.log(itemChild.has_upload_permission);
              console.log(lastItem.has_upload_permission);
              itemChild.has_upload_permission = lastItem.has_upload_permission;
              return;
            }
          });
          tempArr.push(itemChild);
        });
      });
      this.setUserperm = tempArr;
      console.log("结束");
      console.log(this.setUserperm);
    },    // 监听穿梭框组件移除
    remove(fromData, toData, obj) {
      // let tempArr = [];
      // toData.forEach(item => {
      //   item.children.forEach(itemChild => {
      //     this.$set(itemChild, "has_upload_permission", true);
      //     tempArr.push(itemChild);
      //   });
      // });
      // this.setUserperm = tempArr;
      // console.log(fromData);
      // console.log(toData);
    },    // 获取用户组和用户,用作穿梭框
    getGroup() {
      this.$axios
        .get(`/api/meeting/${this.meetingId}/tree/`)
        .then(res => {
          this.fromData = res.data.from_data;
          this.toData = res.data.to_data;
          this.setUserperm = res.data.users;
          console.log(this.setUserperm);
        })
        .catch(res => {
          console.log(res);
        });
    },    //提交数据
    async next() {
      console.log(this.setUserperm);
      // 设定演讲人
      this.$emit("ParentNext");
      if (this.speaker != "") {
        this.setUserperm.forEach((item, index) => {
          if (item.user === this.speaker) {
            item.is_speaker = true;
            console.log("主持人");
          }
        });
      }
      // 开始post数据
      await this.setUserperm.forEach((item, index) => {
        this.$axios
          .post(`/api/meeting-user/${this.meetingId}/`, {
            user: item.user,
            meeting: this.meetingId,
            has_upload_permission: item.has_upload_permission,
            is_speaker: item.is_speaker
          })
          .then(res => {
            console.log(res);
          })
          .catch(res => {
            console.log(res);
          });
      });
    }
  },
  components: { treeTransfer }, // 注册  created() {
    this.getGroup();
  },
  watch: {
    setUserperm(val, newval) {
      console.log("变化");
      console.log(val);
      console.log(newval);
    }
  }  // 会议id
  // props: ["meetingId"]
};
</script><style>
</style>

Answer 1

// 监听穿梭框组件添加
    add(fromData, toData, obj) {
      console.log("开始");
      console.log(this.setUserperm);
      let tempArr = [];
      toData.forEach(item => {
        item.children.forEach(itemChild => {
          this.$set(itemChild, "has_upload_permission", true);
          this.setUserperm.forEach((lastItem, index) => {
            if (itemChild.id.split("-")[1] == lastItem.id.split("-")[1]) {
              console.log(itemChild.has_upload_permission);
              console.log(lastItem.has_upload_permission);
              itemChild.has_upload_permission = lastItem.has_upload_permission;
              return;
            }
          });
          tempArr.push(itemChild);
        });
      });
      this.setUserperm = tempArr;
      console.log("结束");
      console.log(this.setUserperm);
    },

Answer 2

this.setUserperm的值会莫名其妙发生变化,为什么啊,急死了

Answer 3

用$watch监听了,但是还是没有用,就是第一次是一样的,但是this.setUserperm第二次的值就不一样了,我用的一个树形穿梭框

Answer 4

第一次和第二次之间做了什么操作？都是触发了add方法

Answer 5

第一次和第二次之间做了什么操作？都是触发了add方法add方法里不是有 this.setUserperm = tempArr; 这一句去修改setUserperm吗，那你下一次看到的setUserperm和前一次不一样不是正常的吗？