BETA

【Sinatra】Vue.jsとaxiosを使ってjsからレコードを削除する

投稿日:2019-10-29
最終更新:2019-10-29

axiosを使ってレコードの削除をしてみます。

*参考
https://qiita.com/yfujii1127/items/991ae9ff29b478a55b1c
https://github.com/axios/axios/issues/736

注意点

Sinatraでは削除する場合にdeleteでなく、postを送信するので、axiosを使用する場合もpostを使います。

DBの構成

class CreatePosts < ActiveRecord::Migration[6.0]  

  def change  
    create_table :posts do |t|  
      t.string :content  
      t.references :user, foreign_key: true  

      t.timestamps  
    end  
  end  
end  

こんな感じになってます。今回操作する予定のカラムはt.string :content のみです。

ボタンを設置する

test.erb

<div id="app_button_delete" >  
<button class="square_btn red" v-on:click="app_delete">削除</button>  
</div>  

vue.jsで動くボタンを設置します。

コントローラ

post.rb

      post '/delete/:id' do  
        @post = Post.find(params[:id])  
        @post.destroy  
        redirect 'post/all'  
      end  

idを指定して、postメソッドを投げてレコードの削除を行ってます。

jsコード

test.js

var delete_id = '95'  
var app_button_delete = new Vue({  
  el: "#app_button_delete",  
  data () {  
    return {  
      info: null  
    }  
  },  
  methods: {  
    app_delete :function() {  
      axios.post('/post/delete/'+ delete_id)  
      .then(res => {  
        alert("削除完了");  
      })  
      .catch(error => {  
        alert("削除失敗");  
      });  
    }  
  }})  

axiosでレコードを削除する場合は作成する場合と違い、var params_delete = new URLSearchParams(); のように変数にnew URLSearchParams(); を格納しなくてもいけました。

これで削除できました!

まとめ

なんとなくコツをつかんできたかも。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

初学者の成長が垣間見れます

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう