vue reactive でセレクトボックスのデータの受け取る方法について
Q&A
Closed
解決したいこと
初の投稿になります。どうぞよろしくお願いいたします。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