Vueのscope.rowのデータをクリアする方法-フロントエンドQ&A-php.cn

Vueのscope.rowのデータをクリアする方法

PHPz

リリース： 2023-04-18 10:03:49

オリジナル

1129 人が閲覧しました

Vue.js は、インタラクティブなユーザーインターフェイスを作成するための人気のある JavaScript フレームワークです。 Vue.js では、通常、v-for ディレクティブを使用して配列またはオブジェクトを反復処理し、スコープオブジェクトを使用して現在のデータ項目を参照します。ただし、特定の状況下でスコープオブジェクトのデータをクリアまたはリセットする必要がある場合は、いくつかのスキルが必要です。

Vue.js では、Vue のインスタンス化メソッド ($set) または JavaScript の組み込みメソッド (Object.assign) を通じてスコープオブジェクトを変更または更新できます。スコープオブジェクトのデータをクリアまたはリセットする必要がある場合は、Vue インスタンスの $delete メソッドまたは JavaScript の組み込みメソッド (Object.assign) を使用できます。

次の例は、Vue.js の $delete メソッドと JavaScript の Object.assign メソッドを使用してスコープオブジェクトデータをクリアまたはリセットする方法を示しています。

`$delete` メソッドによるデータのクリア

$delete メソッドは Vue.js インスタンスの組み込みメソッドの 1 つであり、指定されたデータを削除するために使用できます。データオブジェクトからの属性。 v-for 命令を使用してデータコレクションを走査する場合、$delete メソッドを使用して現在のデータオブジェクトのプロパティをクリアできます。

たとえば、配列 users があり、v-for ディレクティブでスコープオブジェクトを使用して各ユーザーのデータ項目を参照するとします。

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

ログイン後にコピー

上の例では、次のことがわかります。 resetData メソッドは、$delete メソッドを使用して、現在のデータ項目の年齢属性と性別属性を削除します。これにより、スコープオブジェクト内のデータがクリアされ、未定義に戻ります。

`Object.assign` メソッドによるデータのリセット

$delete メソッドの使用に加えて、JavaScript 組み込みメソッド Object.assign を使用してリセットすることもできます。またはスコープオブジェクトのデータをクリアします。 Object.assign メソッドは、ソースオブジェクトのすべての列挙可能なプロパティをターゲットオブジェクトにコピーするために使用されます。

たとえば、ユーザーデータ項目が複数のプロパティで構成されていると仮定すると、Object.assign メソッドを使用してすべてのプロパティをデフォルト値にリセットできます。

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

ログイン後にコピー

上の例では、次のように使用します。 Object.assign メソッドを使用して年齢と性別のプロパティを 0 にリセットし、'' を使用して現在のデータ項目のデータをクリアします。

$delete メソッドを使用するか Object.assign メソッドを使用するかに関係なく、Vue.js のスコープオブジェクトのデータをクリアまたはリセットできます。これらの手法は、データ収集を効果的に管理し、データを常に管理するのに役立ちます。

以上がVueのscope.rowのデータをクリアする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。