vueでformを書く際に引数を入れたい

Question

axiosをいつも使用しているのですが、axiosを使わずにするにはformの部分をどのように書くんだろう？と言うところにいます。

解決したいこと：　vue内でformを書くときに引数を渡したいです。1の部分にpropsで受け取っているuser_idを入れたいと考えています。

現状: user_idをうまく持ってこれてない。

bladeで書くとしたら以下、これをvueで表したいです。
<form action="{{route('follow', ['user' => $user->id])}}">

<template>
  <div>
    <form action="/user/1/follow">
      <button type="button" class="btn btn-success btn-sm">Follow</button>
    </form>
  </div>
</template>

<script>
export default {
  props: ['user_id']
}
</script>

試した書き方

1, bladeと似ている書き方？ ->　エラー
<form action="{{route('follow', ['user' => user_id])}}">
Errors compiling template:

  action="{{route('follow', ['user' => user_id])}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.



2, urlに入れてしまえばどうだろう？ -> actionの書き方がわからず文字列で表示されてしまいます。
<form action="url">
data() {
    return {
      url: '',
    }
  },
  props: ['user_id'],
  created() {
    let id = this.user_id
    // パスを作成
    var array = ["http://127.0.0.1:8000/user/", id, "/follow"];
    // パスをjoinで結合
    this.url = array.join('')
  }

axiosでいつも書いていたので、formで書く場合はどうなるんだろうと言う興味本位が大きいです。

お分かりになる方いましたら、ご教授いただきたいです。
よろしくお願いします。

Comments

[退会済みユーザー]

ajaxとは全然違います。通信した内容を元に自分で部分的にページを書き換えたり、historyを元にアドレスバーを誤魔化す遷移をするのではなく、

本当にURLを遷移させてページ全体を書き換えます。
https://developer.mozilla.org/ja/docs/Learn/Forms

Answer 1

vueをあまり知らないので検討違いかもしれませんが…

「2, urlに入れてしまえばどうだろう？ -> actionの書き方がわからず文字列で表示されてしまいます。」の案に対して、mustache記法で記述するのはどうでしょうか。

<form action="url">
↓
<form action="{{ url }}">

Comments

[tenlife]

回答ありがとうございます！
提示された方法でも上手く表示できませんでした。エラーになってしまいました。
似ているなと思い下記も試したのですが上手くいかずでした。。
<form :action="url">

書けないものなんですかね。