vue.jsで取得できる値をlaravelのフォームで送信することは可能なのか？(axiosを使わない)

Question

投稿機能の多層カテゴリー機能を実装しています。

カテゴリーの部分はvue.jsで作っています。

解決したいこと： vueのコンポーネントで取得したselectgrandchildをlaravel側のformで送信する事は可能なのでしょうか？

現状：　これまでのやり方だとbladeの方をvueのように書き換えてaxiosで送信していくようにするイメージです。$emitとか使って子から親に渡せば良いとは思っています。
ですが今回はform部分はそのままでコンポネントからselectgrandchildを直接laravelのformと一緒に送る方法はないのだろうか？という状況にいます。

        <form action="{{route('item_create')}}" enctype="multipart/form-data" method="POST">
          @csrf
          <div class="form-group mb-4">
            <label for="item_name">商品名</label>
            <input type="text" name="name" class="form-control" id="item_name" placeholder="蒲焼き">
          </div>
          <category></category>
          <button type="submit" class="btn btn-primary text-white">出品する</button>
        </form>

<template>
  <div>
    <div>
      <label for="parent">カテゴリー</label>
      <select class="custom-select custom-select-sm" id="parent" v-model="select" @change="categorychild">
        <option disabled value="">選択してください</option>
        <option :value="life.id" v-for="life in lifes" :key="life.id">
          {{life.name}}
        </option>
      </select>
      <div v-if="children.length !== 0">
        <select class="custom-select custom-select-sm" id="child" v-model="selectchild" @change="categorygrandchild">
          <option disabled value="">選択してください</option>
          <option :value="child.id" v-for="child in children" :key="child.id">
            {{child.name}}
          </option>
        </select>
      </div>
      <div v-if="grandchildren.length !== 0">
        <select class="custom-select custom-select-sm" id="child" v-model="selectgrandchild" @change="sendnew">
          <option disabled value="">選択してください</option>
          <option :value="grandchild.id" v-for="grandchild in grandchildren" :key="grandchild.id">
            {{grandchild.name}}
          </option>
        </select>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      select: '',
      selectchild: '',
      selectgrandchild: '',
      children: [],
      grandchildren: [],
      lifes: [
        {id: 1, name: '運動'}, 
        {id: 2, name: '食べ物'},
        {id: 3, name: '学び'},
      ],
      childsbeta: [
        {id: 4, parent_id: 1, name: '海のスポーツ'}, 
        {id: 5, parent_id: 1, name: '冬のスポーツ'},
        {id: 6, parent_id: 1, name: '夏のスポーツ'},
        {id: 7, parent_id: 2, name: '和食'}, 
        {id: 8, parent_id: 2, name: '洋食'},
        {id: 9, parent_id: 2, name: 'インスタント'},
        {id: 10, parent_id: 3, name: '理数系'}, 
        {id: 11, parent_id: 3, name: '文系'},
        {id: 12, parent_id: 3, name: 'プログラミング'},
      ],
      grandchildsbeta: [
        {id: 13, child_id: 4, name: 'サーフィン'}, 
        {id: 14, child_id: 4, name: 'サップ'},
        {id: 15, child_id: 4, name: 'ビーチバレー'},
        {id: 16, child_id: 5, name: 'スキー、スノボー'}, 
        {id: 17, child_id: 5, name: 'カーリング'},
        {id: 18, child_id: 5, name: 'スケート'},
        {id: 19, child_id: 6, name: '野球'}, 
        {id: 20, child_id: 6, name: 'サッカー'},
        {id: 21, child_id: 6, name: '陸上'},
        {id: 22, child_id: 7, name: '寿司'}, 
        {id: 23, child_id: 7, name: 'ラーメン'},
        {id: 24, child_id: 7, name: '鍋'},
        {id: 25, child_id: 8, name: 'ピザ'}, 
        {id: 26, child_id: 8, name: 'パスタ'},
        {id: 27, child_id: 8, name: 'ハンバーガー'},
        {id: 28, child_id: 9, name: 'マクドナルド'}, 
        {id: 29, child_id: 9, name: 'バーガーキング'},
        {id: 30, child_id: 9, name: '蒙古タンメン'},
        {id: 31, child_id: 10, name: '医学'}, 
        {id: 32, child_id: 10, name: '化学'},
        {id: 33, child_id: 10, name: '天文学'},
        {id: 34, child_id: 11, name: '古文'}, 
        {id: 35, child_id: 11, name: '歴史、地理'},
        {id: 36, child_id: 11, name: '心理学'},
        {id: 37, child_id: 12, name: 'go'}, 
        {id: 38, child_id: 12, name: 'html'},
        {id: 39, child_id: 12, name: 'javascript'},
      ],
    }
  },
  methods: {
    categorychild() {
      this.children = this.childsbeta.filter(value => value.parent_id === this.select)
    },
    categorygrandchild() {
      this.grandchildren = this.grandchildsbeta.filter(value => value.child_id === this.selectchild)
    },
    sendnew() {
      this.$emit('category-data', [this.selectgrandchild]);
    }
  }
}
</script>

vueで作ったコンポーネントからaxiosを使用しないでselectgrandchildを送るような実装は可能なのでしょうか？
お分かりになる方が居ましたら、ご教授いただきたいです。

不可能な場合はaxiosを使って実装します。

まだまだ勉強中で知識が浅くこのような質問をするに至りました。(もしかすると見当違いな質問をしているかもしれないと思っています。)

よろしくお願いいたします。

laravel7.2
vue.js 2.6.2

Comments

[maisumakun]

実際にaxiosで送信しているコードはどこでしょうか？

[tenlife]

質問の内容が薄くてすいません。
現在はaxiosに関する記述は書いていません。
載せているコードが送信しているformになります。

Answer 1

ですが今回はform部分はそのままでコンポネントからselectgrandchildを直接laravelのformと一緒に送る方法はないのだろうか？

Vueで生成される<input>などにnameを振れば、外側にあるフォームをブラウザで送信する際に、何で書いたフォーム要素なのかは関係なく、まとめて送信されます。

（的はずれな回答でしたら追記していただければと思います）

Comments

[tenlife]

回答ありがとうございます！
一度教えていただいたやり方で進めてみます！

[tenlife]

教えて頂いた方法で実装出来ました！
vue側にinput要素を作り送信させる方法でコントローラーまで飛ばすことができました！
回答ありがとうございました！

<div v-if="grandchildren.length !== 0">
<select class="custom-select custom-select-sm" id="child" v-model="selectgrandchild" @change="sendnew">
<option disabled value="">選択してください</option>
<option :value="grandchild.id" v-for="grandchild in grandchildren" :key="grandchild.id">
{{grandchild.name}}
</option>
</select>
<input type="hidden" name="category_id" :value="here.id">
<input type="hidden" name="category_name" :value="here.name">
</div>