前提・実現したいこと
form
コンポーネントには、form
のコードだけを記載しており、
別のコンポーネントにクリアボタンを設けて、クリックするとform
コンポーネントの値をクリアできるようにしたいのですが、
そういったことは可能なのでしょうか?
form
コンポーネント内にクリアボタンを設ける場合は、下記のようなコードで実装できましたが、
使用上、別コンポーネントからもクリアできるようにしたいです。
vuexを使えば可能なのでしょうか?
該当のソースコード
form.vue
Vue
1<template> 2 <div> 3 <b-field> 4 <input 5 class="text" 6 type="text" 7 v-model="keywordBox" 8 placeholder="キーワードを入力する" 9 @input="changeKeyword($event.target.value)" 10 /> 11 <input 12 class="text" 13 type="number" 14 v-model="minPriceBox" 15 placeholder="最小価格を入力する" 16 @input="changeMinPrice($event.target.value)" 17 /> 18 <input 19 class="text" 20 type="number > 0" 21 v-model="maxPriceBox" 22 placeholder="最大価格を入力する" 23 @input="changeMaxPrice($event.target.value)" 24 /> 25 <input 26 class="submit button" 27 type="submit" 28 value="検索" 29 @click=" 30 setPage(1); 31 " 32 /> 33 <!-- フォーム内クリア --> 34 <b-button @click="formClear()">クリア</b-button> 35 </b-field> 36 </div> 37</template> 38 39<script> 40export default { 41 name: "ApiCall", 42 data() { 43 return { 44 keywordBox: '', 45 minPriceBox: '', 46 maxPriceBox: '', 47 } 48 }, 49 methods: { 50 formClear() { 51 this.keywordBox = ""; 52 this.minPriceBox = ""; 53 this.maxPriceBox = ""; 54 } 55 } 56} 57</script>
考えていること
・別コンポーネントからform.vue内のformClear()
メソッドを使えるようにする
・formClear()
メソッド自体を、vuewのstore
内に移し、どちらのコンポーネントからも使えるようする
のどちらかなのかと思いますが、検索してもthis
を使う方法しか見つからなかったので、form.vue内でしかformClear()
メソッドを使用できずにいます。
アドバイスをいただけますと幸いです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。