Vue で追加、削除、変更、チェック機能を実装する方法

Vue.js で追加、削除、変更、クエリ関数を実装します。 作成: v-model を使用してデータをバインドし、POST リクエストをサーバーに送信して新しいレコードを作成します。読み取り: GET リクエストをサーバーに送信してデータを取得します。更新: v-model を使用してデータを編集し、PUT リクエストをサーバーに送信してレコードを更新します。削除: DELETE リクエストをサーバーに送信してレコードを削除します。

Vue での CRUD 関数の実装

CRUD (CRUD) は、Web アプリケーション運用の基本ツールです。データベース内のデータを作成、読み取り、更新、削除できるようになります。 Vue.js での CRUD 機能の実装は比較的簡単です。

作成

新しいレコードを作成するときは、v-model を使用してデータを双方向バインドし、POST リクエストを行います。サーバー。例:

<code class="html"><template>
  <form @submit.prevent="createItem">
    <input v-model="newItem.name" />
    <button type="submit">Create</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      newItem: { name: '' }
    }
  },
  methods: {
    createItem() {
      // 向服务器发送 POST 请求
      axios.post('/items', this.newItem).then(() => {
        // 重新获取数据或执行其他操作
      })
    }
  }
}
</script></code>

Read

データを読み取るとき、サーバーに対して GET リクエストを行います。例:

<code class="html"><template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: []
    }
  },
  mounted() {
    // 在组件挂载时向服务器发送 GET 请求
    axios.get('/items').then((response) => {
      this.items = response.data
    })
  }
}
</script></code>

Update

レコードを更新するときは、v-model を使用してデータを編集し、PUT リクエストを行います。サーバー。例:

<code class="html"><template>
  <form @submit.prevent="updateItem">
    <input v-model="item.name" />
    <button type="submit">Update</button>
  </form>
</template>

<script>
export default {
  props: ['item'],
  methods: {
    updateItem() {
      // 向服务器发送 PUT 请求
      axios.put(`/items/${this.item.id}`, this.item).then(() => {
        // 重新获取数据或执行其他操作
      })
    }
  }
}
</script></code>

Delete

レコードを削除するときは、サーバーに対して DELETE リクエストを行います。例:

<code class="html"><template>
  <button @click="deleteItem">Delete</button>
</template>

<script>
export default {
  props: ['item'],
  methods: {
    deleteItem() {
      // 向服务器发送 DELETE 请求
      axios.delete(`/items/${this.item.id}`).then(() => {
        // 重新获取数据或执行其他操作
      })
    }
  }
}
</script></code>

以上がVue で追加、削除、変更、チェック機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。