how can call rails service in vue

Question

I just want to call the twilio serivce on < a > tag when click on verify number service should be call and check if number is valid then proceed next otherwise show error but i don't know how can i do this.

service/twilio.rb

def call(number, message)
  account_sid = ENV['TWILIO_ACCOUNT_SID']
  auth_token = ENV['TWILIO_AUTH_TOKEN']
  @client = Twilio::REST::Client.new(account_sid, auth_token)
  message = @client.messages.create(body: message,from: ENV['TWILIO+NUMBER'],to: number)

vue.js

<div>
 <li v-for:'number in phoneNumbers '>

  {{ number }}
  <a>
    verify number
  </a>
 </li>

score -1 · Accepted Answer · answered Nov 11 '21 at 00:51

Twilio developer evangelist here.

First up if you want to verify a number, then I recommend you take a look at Twilio Verify. It gives you options to verify numbers by SMS or voice and handles sending codes to the phone and verifying that the code is then correct.

Next, if you want to trigger a number verification from your front-end then you need to expose your service through a controller action.

Something like this would start a verification and return a JSON object to show the success.

class PhoneNumbersController < ApplicationController
  def verify
    account_sid = ENV['TWILIO_ACCOUNT_SID']
    auth_token = ENV['TWILIO_AUTH_TOKEN']
    @client = Twilio::REST::Client.new(account_sid, auth_token)
    @client.verify
      .services(ENV["TWILIO_VERIFY_SERVICE_SID"])
      .verifications
      .create(to: params[:number], channel: "sms")
    render json: { :verification => "started" }
  end
end

You need to set a route for this controller action in config/routes.rb too.

For the front-end, I've not done a lot of work with Vue, but hopefully this gets you started. You need to make an HTTP request to the controller action when your link is clicked. You can use the fetch API to make the request. Something like this should get you started:

<template>
  <div>
    <li v-for:'number in phoneNumbers '>
      {{ number }} 
      <button v-on:click="startVerification({{ number }})">
        verify number
      </button>
    </li>
  </div>
</template>

<script>
export default {
  methods: {
    startVerification: function(number) {
      fetch("/phone_numbers/verify", {
        method: "POST",
        body: JSON.stringify({ number: number }),
        headers: { "Content-Type": "application/json" }
      })
        .then(res => res.json)
        .then(data => {
          // Verification started. Probably update the state and ask for the code somehow
        })
        .catch(console.error);
    }
  }
}
</script>

how can call rails service in vue

1 Answers1