VUEはthis.$set配列内の値を変更する

10235 ワード


<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>      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" }; //         ,        
        let art = { message: "first", id: "4" };
        this.$set(this.items, 0, art); //$set         
      },
    });
  script>
html>