Vue でデータの追加、削除、変更、クエリを実装し、ダイアログ ボックスと組み合わせる方法

近年、フロントエンド テクノロジの継続的な開発により、Vue はますます多くの開発者に選ばれるフロントエンド フレームワークになりました。その中でも、フロントエンドデータの追加、削除、変更、クエリは、Web アプリケーションの最も基本的な機能の 1 つです。 Vue で、ダイアログ ボックスをポップアップ表示しながら追加、削除、変更、確認するにはどうすればよいですか?次に、この記事では、Vue でデータを追加、削除、変更、クエリする方法と、ダイアログ ボックスを組み合わせてユーザーの対話性を高める方法を紹介します。

1. 準備

Vue を実践する前に、次のテクノロジーを理解して習得する必要があります:

1. Vue の基本知識: コンポーネント、データ バインディング、メソッドなど、ライフサイクルおよびその他の関連コンテンツ;
2. Element UI: Vue2.0 に基づく UI コンポーネント ライブラリ。テーブル、ダイアログ ボックス、ドロップダウン ボックスなどを含む豊富な UI コンポーネントのセットを提供します。
3. Webpack: 複数の JavaScript ファイルを 1 つのファイルにバンドルしてロード数を削減できる最新のリソース マネージャー。

2. 追加、削除、変更、クエリ操作の実装

1. データ初期化

Vue では、データ オプションを使用して定義します。データ。まず、Vue インスタンスでデータ オブジェクトを定義し、そこにデータを格納するための変数を追加します。次のような単純なテーブルを例に挙げます。

<template>
  <div>
    <el-table :data="tableData">
      ...
    </el-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: []
      }
    }
  }
</script>

2. データ追加操作の実装

Vue でのデータ追加操作の実装には、v-モデル命令 この命令は、フォーム要素と Vue インスタンスのデータを双方向にバインドする機能です。フォームの値が変更されると、対応するデータも更新されます。たとえば、テーブルにデータを追加する場合、次のコードを通じて実行できます。

<el-form>
  <el-form-item label="Name">
    <el-input v-model="name"></el-input>
  </el-form-item>
  <el-form-item label="Age">
    <el-input v-model="age"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button @click="addData">Add Data</el-button>
  </el-form-item>
</el-form>

<script>
  export default {
    data() {
      return {
        tableData: [],
        name: '',
        age: ''
      }
    },
    methods: {
      addData() {
        this.tableData.push({name: this.name, age: this.age})
        this.name = ''
        this.age = ''
      }
    }
  }
</script>

3. データの削除操作の実現

削除Vue でのデータ操作は、ボタンやリンクをクリックして削除するという非常に一般的な操作です。 Vue では、v-for 命令を使用してテーブル データを反復し、イベントを通じて対応する削除関数を呼び出すことができます。データを削除するコードの実装は次のとおりです。

<el-table :data="tableData">
  <el-table-column label="Name">
    <template slot-scope="scope">{{ scope.row.name }}</template>
  </el-table-column>
  <el-table-column label="Age">
    <template slot-scope="scope">{{ scope.row.age }}</template>
  </el-table-column>
  <el-table-column label="Actions">
    <template slot-scope="scope">
      <el-button type="danger" @click="deleteData(scope.$index)">Delete</el-button>
    </template>
  </el-table-column>
</el-table>

<script>
  export default {
    data() {
      return {
        tableData: []
      }
    },
    methods: {
      deleteData(index) {
        this.tableData.splice(index, 1)
      }
    }
  }
</script>

4. データ編集操作の実装

Vue では、データ編集操作は 2 つのステップに分割する必要があります。 、データを編集します データがフォームに表示されます。2 つ目は、変更したデータをサーバーに送信することです。 v-model 命令を使用して編集したデータをフォームに表示し、フォームを送信して変更したデータを送信できます。データ編集のためのコード実装は次のとおりです:

<el-table :data="tableData">
  <el-table-column label="Name">
    <template slot-scope="scope">{{ scope.row.name }}</template>
  </el-table-column>
  <el-table-column label="Age">
    <template slot-scope="scope">{{ scope.row.age }}</template>
  </el-table-column>
  <el-table-column label="Actions">
    <template slot-scope="scope">
      <el-button @click="editData(scope.row)">Edit</el-button>
    </template>
  </el-table-column>
</el-table>

<el-dialog :visible.sync="dialogVisible">
  <el-form>
    <el-form-item label="Name">
      <el-input v-model="editRow.name"></el-input>
    </el-form-item>
    <el-form-item label="Age">
      <el-input v-model="editRow.age"></el-input>
    </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">Cancel</el-button>
    <el-button type="primary" @click="updateData">OK</el-button>
  </span>
</el-dialog>

<script>
  export default {
    data() {
      return {
        tableData: [],
        dialogVisible: false,
        editRow: {}
      }
    },
    methods: {
      editData(row) {
        this.dialogVisible = true
        this.editRow = Object.assign({}, row)
      },
      updateData() {
        const index = this.tableData.indexOf(this.editRow)
        Object.assign(this.tableData[index], this.editRow)
        this.dialogVisible = false
      }
    }
  }
</script>

3. ダイアログ ボックスを組み合わせてインタラクティブな効果を実現する

Vue の Element UI コンポーネント ライブラリには、ダイアログ コンポーネントを含む豊富なコンポーネントが用意されています。ポップアップダイアログボックスの効果を実現するのに非常に便利です。 Vue では、ダイアログ コンポーネントの実装には、Element UI コンポーネント ライブラリの導入が必要です。ダイアログ コンポーネントのコード実装は次のとおりです:

<el-dialog :visible.sync="dialogVisible">
  <span slot="title">Edit Data</span>
  <el-form>
    <el-form-item label="Name">
      <el-input v-model="editRow.name"></el-input>
    </el-form-item>
    <el-form-item label="Age">
      <el-input v-model="editRow.age"></el-input>
    </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">Cancel</el-button>
    <el-button type="primary" @click="updateData">OK</el-button>
  </span>
</el-dialog>

<script>
  export default {
    data() {
      return {
        dialogVisible: false,
        editRow: {}
      }
    },
    methods: {
      editData(row) {
        this.dialogVisible = true
        this.editRow = Object.assign({}, row)
      },
      updateData() {
        ...
        this.dialogVisible = false
      }
    }
  }
</script>

IV. 結論

この記事では主に次のことを紹介しますVue での要素の追加の実装 削除、変更、クエリなどの基本機能のメソッドをダイアログ コンポーネントと組み合わせて、ユーザーの対話性を高める効果を実現します。なお、実際の開発では必要に応じて修正や改善を行う必要があり、使用時にはコードの効率性や可読性、コードとHTMLの分離などに注意する必要があります。

以上がVue でデータの追加、削除、変更、クエリを実装し、ダイアログ ボックスと組み合わせる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。