快捷導(dǎo)航

Vue如何用this.$set改變數(shù)組里的某個(gè)值

更新時(shí)間：2022年12月19日 09:35:19 作者：HqL丶1024

這篇文章主要介紹了Vue用this.$set改變數(shù)組里的某個(gè)值,文中通過(guò)示例代碼介紹了vue中this.$set()的用法----更新數(shù)組和對(duì)象的值，需要的朋友可以參考下

Vue用this.$set改變數(shù)組里的某個(gè)值

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <script src="https://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js"></script>
    <title>表格數(shù)據(jù)分頁(yè)</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="vue">
      <div id="app">
        <p v-for="item in items" :key="item.id">{{item.message}}</p>
      </div>
    </div>
  </body>

  <script>
    new Vue({
      el: "#vue",
      data: {
        items: [
          { message: "one", id: "1" },
          { message: "two", id: "2" },
          { message: "three", id: "3" },
        ],
      },
      methods: {},
      mounted() {
        let that = this;
        // this.items[0] = { message: "first", id: "4" }; //此時(shí)對(duì)象的值更改了，但是視圖沒(méi)有更新
        let art = { message: "first", id: "4" };
        this.$set(this.items, 0, art); //$set 可以觸發(fā)更新視圖
      },
    });
  </script>
</html>

補(bǔ)充知識(shí)：

下面看下vue中this.$set()的用法----更新數(shù)組和對(duì)象的值

我們先看看官網(wǎng)給出的解釋?zhuān)?/p>

1、更新數(shù)組:

我們有一個(gè)數(shù)組，包括人員姓名和人員年齡兩個(gè)屬性。

想要實(shí)現(xiàn)在頁(yè)面剛加載的時(shí)候改變姓名為李四的人的信息。

首先我們想到的是在mouted函數(shù)中直接修改name為李四的人的信息

this.itemList[1] = {
      name: '李思思',
      age: 30
    }
    console.log(this.itemList[1]);

但是這時(shí)候控制臺(tái)打印的數(shù)據(jù)更新了，但是頁(yè)面視圖卻沒(méi)有更新。這時(shí)候我們就需要用到this.$set()來(lái)更新視圖了。

 <!-- 使用$set更新數(shù)組的值 -->
    <ul>
      <li v-for="(item,index) in itemList" :key="index">
        <div>
          <span>姓名：</span>
          <span>{{item.name}}</span>
          <span>年齡：</span>
          <span>{{item.age}}</span>
        </div>
      </li>
    </ul>

data() {
    return {
      itemList: [
        {
          name: "張三",
          age: 18,
        },
        {
          name: "李四",
          age: 20,
        },
        {
          name: "王五",
          age: 22,
        },
      ],
      person: {
        name: '前端勸退師'
      }
    }
  },
  mounted() {
    // 要求
    // 修改數(shù)組中姓名為李四的人的信息
    // this.itemList[1] = {
    //   name: '李思思',
    //   age: 30
    // }
    // console.log(this.itemList);
    console.log("======================");
    this.$set(this.itemList, 1, {
      name: '李思思',
      age: 30
    });
  },

2、更新對(duì)象：

eg:給對(duì)象添加一個(gè)屬性并賦值，上代碼：

 <!-- 使用$set更新對(duì)象的值-----給對(duì)象添加屬性 -->
    <div style="display:flex;">
      <p>{{person.name}}</p>
      <el-input v-model="person.score" style="width:200px;"></el-input>
    </div>
    <el-button @click="addScore">自定義成績(jī)</el-button>

 methods: {
    addScore() {
      this.person.score = "60"
      console.log(this.person);
      // this.$set(this.person, "score", "60");
    }
  }

在button事件點(diǎn)擊的時(shí)候給person對(duì)象添加score屬性，發(fā)現(xiàn)：

我們發(fā)現(xiàn)控制臺(tái)打印的結(jié)果顯示給person對(duì)象添加了score屬性并賦值了60，但是在頁(yè)面上并沒(méi)有更新新加的score屬性和它對(duì)應(yīng)的值，這時(shí)候便使用this.$set()來(lái)更新視圖層了。

methods: {
    addScore() {
      // this.person.score = "60"
      // console.log(this.person);
      this.$set(this.person, "score", "60");
    }
  }

這時(shí)候就顯示合適了。

注意：this.$set( target, key, value )

target：要更改的數(shù)據(jù)源(可以是對(duì)象或者數(shù)組)

key：要更改的具體數(shù)據(jù)

value ：重新賦的值。

到此這篇關(guān)于Vue用this.$set改變數(shù)組里的某個(gè)值的文章就介紹到這了,更多相關(guān)Vue用this.$set改變數(shù)組某個(gè)值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: