Cara mengosongkan data untuk scope.row dalam vue

Vue.js ialah rangka kerja JavaScript yang popular untuk mencipta antara muka pengguna interaktif. Dalam Vue.js, kami biasanya menggunakan arahan v-for untuk lelaran pada tatasusunan atau objek, dan menggunakan objek skop untuk merujuk item data semasa. Walau bagaimanapun, apabila kami perlu mengosongkan atau menetapkan semula data objek skop dalam keadaan tertentu, kami memerlukan beberapa kemahiran.

Dalam Vue.js, kami boleh mengubah suai atau mengemas kini objek skop melalui kaedah instantiation ($set) Vue atau kaedah terbina dalam JavaScript (Object.assign). Apabila kita perlu mengosongkan atau menetapkan semula data objek skop, kita boleh menggunakan kaedah $delete bagi contoh Vue atau kaedah terbina dalam JavaScript (Object.assign).

Berikut ialah beberapa contoh yang menunjukkan cara mengosongkan atau menetapkan semula data objek skop melalui kaedah $delete Vue.js dan kaedah Object.assign JavaScript.

Kosongkan data melalui kaedah $delete

Kaedah $delete ialah salah satu kaedah terbina dalam contoh Vue.js, yang boleh digunakan untuk memadamkan atribut tertentu daripada data objek. Apabila menggunakan arahan v-for untuk melintasi pengumpulan data, kita boleh menggunakan kaedah $delete untuk mengosongkan sifat objek data semasa.

Sebagai contoh, katakan kami mempunyai pengguna tatasusunan dan menggunakan objek skop dalam arahan v-for untuk merujuk item data setiap pengguna:

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>名称</th>
          <th>年龄</th>
          <th>性别</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(user, index) in users" :key="user.id">
          <td>{{user.id}}</td>
          <td>{{user.name}}</td>
          <td>{{user.age}}</td>
          <td>{{user.gender}}</td>
          <td>
            <button @click="resetData(index)">重置数据</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
        {id: 1, name: '张三', age: 18, gender: '男'},
        {id: 2, name: '李四', age: 20, gender: '女'},
        {id: 3, name: '王五', age: 22, gender: '男'}
      ]
    }
  },
  methods: {
    resetData(index) {
      const user = this.users[index]
      this.$delete(user, 'age') // 删除age属性
      this.$delete(user, 'gender') // 删除gender属性
    }
  }
}
</script>

Dalam contoh di atas, kami Anda boleh melihat bahawa kaedah resetData menggunakan kaedah $delete untuk memadamkan atribut umur dan jantina bagi item data semasa. Ini akan mengosongkan data dalam objek skop, mengembalikannya kepada tidak ditentukan.

Tetapkan semula data melalui kaedah Object.assign

Selain menggunakan kaedah $delete, kami juga boleh menggunakan kaedah terbina dalam JavaScript Object.assign untuk menetapkan semula atau mengosongkan data bagi objek skop. Kaedah Object.assign digunakan untuk menyalin semua sifat terhitung objek sumber ke objek sasaran.

Sebagai contoh, dengan mengandaikan item data pengguna kami terdiri daripada berbilang sifat, kami boleh menggunakan kaedah Object.assign untuk menetapkan semula semua sifat kepada nilai lalainya:

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>名称</th>
          <th>年龄</th>
          <th>性别</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(user, index) in users" :key="user.id">
          <td>{{user.id}}</td>
          <td>{{user.name}}</td>
          <td>{{user.age}}</td>
          <td>{{user.gender}}</td>
          <td>
            <button @click="resetData(index)">重置数据</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
        {id: 1, name: '张三', age: 18, gender: '男'},
        {id: 2, name: '李四', age: 20, gender: '女'},
        {id: 3, name: '王五', age: 22, gender: '男'}
      ]
    }
  },
  methods: {
    resetData(index) {
      const user = this.users[index]
      Object.assign(user, {age: 0, gender: ''}) // 重置属性值
    }
  }
}
</script>

Dalam contoh di atas , kami menggunakan kaedah Object.assign untuk menetapkan semula atribut umur dan jantina kepada 0 dan '' untuk mengosongkan data item data semasa.

Sama ada menggunakan kaedah $delete atau kaedah Object.assign, kami boleh mengosongkan atau menetapkan semula data objek skop dalam Vue.js. Teknik ini boleh membantu kami mengurus pengumpulan data dengan berkesan dan memastikan data kami sentiasa terkawal.

Atas ialah kandungan terperinci Cara mengosongkan data untuk scope.row dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!