el-time-select数据改变了视图没更新

最新推荐文章于 2024-12-05 17:06:09 发布

原创最新推荐文章于 2024-12-05 17:06:09 发布 · 2.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#t时间选择器视图没更新 #数据更新但是视图不更新

vue精选同时被 2 个专栏收录

18 篇文章

订阅专栏

使用UI库时遇上的那些事～

13 篇文章

订阅专栏

当在dialog中使用el-time-select组件时，遇到数据更新但视图未随之更新的状况。通过为dialog添加v-if解决了这个问题，因为不加v-if时，element的input组件会复用状态，导致显示的仍是旧数据。通过理解组件复用原理，可以避免此类问题。

我的场景：

<span class="option" @click="robotSetting(item)">{{$t('operation.set')}}</span>
<robot-setting-dialog
   :dialogVisible="dialogVisible"
   :form="robotSettingForm"
   :dataId="dataId"
   @getBundleRobot="getBundleRobot"
   @changeVisible="changeVisible"/>

点击设置的时候会出现dialog弹框，下面是引用了el-time-select组件

<el-form-item
  :label="$t('notificationPush.pushTime')"
  prop="pushTime"
  :rules="{required:true, validator:validator_pushTime, trigger: 'change'}">
    <span class="date-label">{{$t('label.everyDay')}}</span>
    <el-time-select
      v-model="form.pushTime"
      :picker-options="{
        start: '00:05',
        end:'23:05',
        step: '01:00',
        minTime: form.statisticsDeadline
      }"
      :disabled="!form.statisticsDeadline"
      :placeholder="$t('notificationPush.chooseTime')">
    </el-time-select>
</el-form-item>

然后出现了数据改变了视图没更新。
在这里插入图片描述
之后我给dialog加了一个v-if就显示正常了。

    <robot-setting-dialog
      v-if="dialogVisible"
      :dialogVisible="dialogVisible"
      :form="robotSettingForm"
      :dataId="dataId"
      @getBundleRobot="getBundleRobot"
      @changeVisible="changeVisible"/>

原因：element复用了上次使用的input，input也是就地复用，这种临时DOM状态也仍旧保存了下来，从而使得input中的数据还是原先的数据，如下图

在这里插入图片描述
比如再举个例子，可以从这个例子中体会一下复用input，demo代码

父组件：
<template>
  <div class="border">
    <div v-for="(item,index) in list" :key="index">
      <item-box :test="item.id"></item-box>
      <button @click="delClick(index)">删除{{item.id}}</button>
    </div>
  </div>
</template>
<script>
import itemBox from "./ListInput";
export default {
  components: {
    itemBox
  },
  data() {
    return {
      list: [
        {
          msg: "k1",
          id: 0
        },
        {
          msg: "k2",
          id: 1
        },
        {
          msg: "k3",
          id: 2
        }
      ]
    };
  },
  methods: {
    delClick(index) {
      console.log("我是index---", index);
      this.list.splice(index, 1);
    }
  }
};
</script>

子组件：
<template>
  <span>
    <button @click="newClick">输出</button>
    <button @click="itemClick">{{test+status+testOne}}</button>
  </span>
</template>
<script>
export default {
  props: ["test"],
  data() {
    return {
      status: "no",
      testOne: this.test
    };
  },
  methods: {
    itemClick() {
      this.status = "yes";
    },
    newClick() {
      console.log(this.test, this.testOne, this.status);
    }
  }
};
</script>