So löschen Sie Daten für Scope.row in Vue-Front-End-Fragen und Antworten-php.cn

So löschen Sie Daten für Scope.row in Vue

PHPz

Freigeben： 2023-04-18 10:03:49

Original

912 Leute haben es durchsucht

Vue.js ist ein beliebtes JavaScript-Framework zum Erstellen interaktiver Benutzeroberflächen. In Vue.js verwenden wir normalerweise die v-for-Direktive, um über ein Array oder Objekt zu iterieren, und verwenden das Scope-Objekt, um auf das aktuelle Datenelement zu verweisen. Wenn wir jedoch unter bestimmten Umständen die Daten eines Scope-Objekts löschen oder zurücksetzen müssen, benötigen wir einige Fähigkeiten.

In Vue.js können wir das Scope-Objekt über die Instanziierungsmethode ($set) von Vue oder die integrierte Methode von JavaScript (Object.assign) ändern oder aktualisieren. Wenn wir die Daten des Scope-Objekts löschen oder zurücksetzen müssen, können wir die Methode $delete der Vue-Instanz oder die integrierte Methode von JavaScript (Object.assign) verwenden.

Im Folgenden finden Sie einige Beispiele, die zeigen, wie Sie Bereichsobjektdaten über die Methode $delete von Vue.js und die Methode Object.assign von JavaScript löschen oder zurücksetzen.

Daten über die Methode `$delete` löschen`$delete`方法清空数据

$delete方法是Vue.js实例的内置方法之一，可以用于从数据对象中删除指定属性。在使用v-for指令遍历数据集合时，我们可以使用$delete方法来清空当前数据对象的属性。

例如，假设我们有一个数组users，并在v-for指令中使用了scope对象引用每个user的数据项：

<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>

Nach dem Login kopieren

在上面的例子中，我们可以看到resetData方法使用了$delete方法来删除当前数据项的age和gender属性。这将清除scope对象中的数据，使其返回undefined。

通过`Object.assign`

Die Methode $delete ist eine der integrierten Methoden von Vue.js-Instanzen und kann es sein Wird zum Entfernen von Daten aus Datenobjekten verwendet. Löschen Sie das angegebene Attribut. Wenn wir die v-for-Anweisung zum Durchlaufen der Datensammlung verwenden, können wir die $delete-Methode verwenden, um die Eigenschaften des aktuellen Datenobjekts zu löschen.

Angenommen, wir haben ein Array von Benutzern und verwenden das Scope-Objekt in der v-for-Direktive, um auf die Datenelemente jedes Benutzers zu verweisen:

<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>

Nach dem Login kopieren

Im obigen Beispiel können wir sehen, dass die Methode „resetData“ die Methode „$delete“ verwendet, um die Alters- und Geschlechtsattribute des aktuellen Datenelements zu löschen. Dadurch werden die Daten im Bereichsobjekt gelöscht und auf undefiniert zurückgesetzt.

Daten über die Methode Object.assign zurücksetzen

Zusätzlich zur Verwendung der Methode $delete können wir auch die in JavaScript integrierte Methode verwenden Object.assign zum Zurücksetzen oder Löschen der Daten des Bereichsobjekts. Die Methode Object.assign wird verwendet, um alle aufzählbaren Eigenschaften des Quellobjekts in das Zielobjekt zu kopieren. #🎜🎜##🎜🎜#Angenommen, unser Benutzerdatenelement besteht aus mehreren Eigenschaften, können wir die Methode Object.assign verwenden, um alle Eigenschaften auf ihre Standardwerte zurückzusetzen: #🎜🎜#rrreee#🎜🎜#Im Obigen Im Beispiel verwenden wir die Methode Object.assign, um die Alters- und Geschlechtsattribute auf 0 und '' zurückzusetzen, um die Daten des aktuellen Datenelements zu löschen. #🎜🎜##🎜🎜#Ob mit der Methode $delete oder der Methode Object.assign, wir können die Daten des Scope-Objekts in Vue.js löschen oder zurücksetzen. Diese Techniken können uns dabei helfen, Datensammlungen effektiv zu verwalten und sicherzustellen, dass unsere Daten immer unter Kontrolle sind. #🎜🎜#

Das obige ist der detaillierte Inhalt vonSo löschen Sie Daten für Scope.row in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!