vue2强制刷新,解决页面不会重新渲染的问题

问题描述:

在使用Vue框架开发时,在函数中改变了页面中的某个值,在函数中查看是修改成功了,但在页面中没有及时刷新改变后的值;

解决:

运用 this.$forceUpdate();  //强制刷新,解决页面不会重新渲染的问题

例:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

<template>

  <div>

    <el-card>

      <ul class="list-style-none title-list">

        <li v-for="item in titleList" v-bind:class="{'active':item.active}" @click="activeItem(item)">{{item.name}}li>

      ul>

    el-card>

  

  div>

template>

  

<script>

  export default {

    name: "approval-list",

    data() {

      return {

        titleList: [

          {id: 1, name: 'Property', active: true},

          {id: 2, name: 'Tower'},

          {id: 3, name: 'Unit'},

          {id: 4, name: 'Listing'},

          {id: 5, name: 'Agent'},

        ],

      }

    }, methods: {

      activeItem(_item){

        this.titleList.forEach(item=>{

          item.active=false;

        });

        _item.active = true;

        console.log(this.titleList);

        this.$forceUpdate();

      }

    }

  }

script>

  

<style scoped>

  ul.title-list {

    display: flex;

  

  }

  

  ul.title-list > li {

    padding: 20px 0px;

    margin: 0px 20px;

  }

  

  .active {

    border-bottom: 2px solid #FF0000;

    color: #FF0000;

  }

style>

你可能感兴趣的:(vuejs)