LoginSignup
aozora717
@aozora717 (ao fukurou)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

vue reactive でセレクトボックスのデータの受け取る方法について

Q&AClosed

解決したいこと

初の投稿になります。どうぞよろしくお願いいたします。LaravelとVueの初学者でCRUDの勉強をしております。 やでの文字列の受け取りでのCRUDは問題なくできています。
次のステップとしてセレクトボックスを実装しようと思いました。
TAGというセレクトボックスのデータをformに入れたいと思い、以下のコードを追加しました。

<select v-model="form.tag" name="tag" id="tag">  
<option value="A">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>

<script>
import { reactive  } from 'vue'
import useProducts from '../../composables/products'
 export default {
     setup() { 
        const form = reactive({
            name: '',
            tag: '',
            description: ''
        })
        const { errors, storeProduct } = useProducts()
        const saveProduct = async () => {
               await storeProduct({ ...form})
        }
        return {
            form,
            errors,
            saveProduct
        }
     }
 }
 </script>

発生している問題

投稿ボタンを押すと、そのままエラーなどは出ずに、データは投稿されますが、mysqlを見るとtagのカラムにデータが入っていない状況です。

自分で試したこと

ウェブ検索でいろいろなvueのSelectboxの実装方法をいろいろと試しますが、さまざまなエラーが出る状態で、調べた結果、分かったことが、reactiveという形でselectboxを実装しなければならないようでした。このreactive用の書き方にしなければならないようなところまではわかったのですが、その方法を探し出すことができませんでした。
皆様、どうぞよろしくお願いいたします。

0

1Answer

This answer has been deleted for violation of our Terms of Service.

Your answer might help someone💌