Comment effacer les données pour scope.row dans vue-Questions et réponses frontales-php.cn

Comment effacer les données pour scope.row dans vue

PHPz

Libérer： 2023-04-18 10:03:49

original

1128 Les gens l'ont consulté

Vue.js est un framework JavaScript populaire pour créer des interfaces utilisateur interactives. Dans Vue.js, nous utilisons généralement la directive v-for pour parcourir un tableau ou un objet, et utilisons l'objet scope pour faire référence à l'élément de données actuel. Cependant, lorsque nous devons effacer ou réinitialiser les données d'un objet de portée dans certaines circonstances, nous avons besoin de certaines compétences.

Dans Vue.js, nous pouvons modifier ou mettre à jour l'objet scope via la méthode d'instanciation de Vue ($set) ou la méthode intégrée de JavaScript (Object.assign). Lorsque nous devons effacer ou réinitialiser les données de l'objet scope, nous pouvons utiliser la méthode $delete de l'instance Vue ou la méthode intégrée de JavaScript (Object.assign).

Voici quelques exemples montrant comment effacer ou réinitialiser les données d'un objet de portée via la méthode $delete de Vue.js et la méthode Object.assign de JavaScript.

Effacer les données via la méthode `$delete$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>

Copier après la connexion

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

通过`Object.assign`

La méthode $delete est l'une des méthodes intégrées de l'instance Vue.js et peut être utilisée pour supprimer les attributs spécifiés de l'objet de données. Lorsque vous utilisez l'instruction v-for pour parcourir la collection de données, nous pouvons utiliser la méthode $delete pour effacer les propriétés de l'objet de données actuel.

Par exemple, supposons que nous ayons un tableau d'utilisateurs et que nous utilisions l'objet scope dans la directive v-for pour référencer les éléments de données de chaque utilisateur :

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

Copier après la connexion

Dans l'exemple ci-dessus, nous pouvons voir que la méthode resetData utilise le $delete méthode pour supprimer les attributs d’âge et de sexe de l’élément de données actuel. Cela effacera les données de l'objet scope et les rendra indéfinies.

Réinitialiser les données via la méthode Object.assign

En plus d'utiliser la méthode $delete, nous pouvons également utiliser la méthode intégrée JavaScript Object.assign pour réinitialiser ou effacer les données de la portée objet. La méthode Object.assign est utilisée pour copier toutes les propriétés énumérables de l'objet source vers l'objet cible. 🎜🎜Par exemple, en supposant que notre élément de données utilisateur se compose de plusieurs propriétés, nous pouvons utiliser la méthode Object.assign pour réinitialiser toutes les propriétés à leurs valeurs par défaut : 🎜rrreee🎜Dans l'exemple ci-dessus, nous utilisons la méthode Object.assign pour attribuer l'âge et L'attribut de genre est réinitialisé à 0 et '' pour effacer les données de l'élément de données actuel. 🎜🎜Que ce soit en utilisant la méthode $delete ou la méthode Object.assign, nous pouvons effacer ou réinitialiser les données de l'objet scope dans Vue.js. Ces techniques peuvent nous aider à gérer efficacement les collectes de données et à garantir que nos données sont toujours sous contrôle. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!