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

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 サイトの他の関連記事を参照してください。