vue.jsでテキストボックスをクリアしたい。

前提・実現したいこと

vue.jsで簡単な検索フォームを作っています。
input textをリセットする際、テキストボックスをクリアしたいです。
初歩的な質問かもしれませんがよろしくお願いします。

発生している問題・エラーメッセージ

データ初期化のコードを入れず実行すると上手くいくのですが
テキストボックスの文字がクリアされずに
文字の右側にfocusがあたってしまいます。

該当のソースコード

var vm = new Vue({
el: '#app',
data: {
items: [],
textInput: ''
},
methods: {
focusInput: function() {
//■これを入れると動作しなくなるthis.items=[];
this.items=[];
this.$refs.mytext.value='';
this.$refs.mytext.focus();

},

}
});

試したこと

this.items=[];消すと上手くいきます。

補足情報（FW/ツールのバージョンなど）

javascriptの書き方だと思うのですが、順番を変えても同じ現象となります。

行動規範の内容に同意します

回答1件

ベストアンサー

HTMLのテンプレート部分はどのように記述されていますか？

一般的には直接DOMにアクセスする$refsではなく、v-modelというディレクティブを使ってinputの値を変更することが多いです。

投稿2020/04/19 23:47

tsuyo_244

総合スコア219

退会済みユーザー

2020/04/20 00:06

おせわになります。v-modelは使っているのですが、ある記事で4resを使うようにありましたので・・・。ｖ－modelで書く場合は動作するのでしょうか・・。少し試してみます・・。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>PHP+mysqlデータ取得(検索パラメータあり)</title> <link rel="stylesheet" type="text/css" href="css/my.css"> </head> <H1>Vue.js（axios）版―検索条件を指定してください</H1> <body> <div id="app"> <p> id検索: <input type="text" v-model="textInput" ref="mytext"> <button @click="request(textInput)">検索</button> <input type="button" @click="focusInput()" value="再検索"> </p>

退会済みユーザー

2020/04/20 00:19

下記のように修正してみましたが駄目でした・・・。 var vm = new Vue({ el: '#app', data: { items: [], textInput: '' }, mounted () { this.$refs.mytext.focus(); //起動時　　this.$refs.mytext.style.backgroundColor = '#e6e6fa' ; }, methods: { 　　　focusInput: function() { //refで任意のタグ名とする（推奨） this.textInput=''; //this.items=[]; this.$refs.mytext.value=''; this.$refs.mytext.focus(); //this.del();//メソッド内で別のメソッドを呼び出す },

tsuyo_244

2020/04/20 12:29 編集

なるほど...いただいた情報を元に手元でやってみたんですが、 this.items=[];が付いていても問題なく動作するようでした。もしかしたらテンプレート側でthis.itemsを使っている箇所に関係があるのかもしれないです。 ``` <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>VueTest</title> </head> <body> <div id="app"> <p><input type="text" v-model="textInput" ref="mytext"></p> <button @click="request(textInput)">検索</button> <input type="button" @click="focusInput()" value="再検索"> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { items: [], textInput: '' }, mounted () { this.$refs.mytext.focus(); this.$refs.mytext.style.backgroundColor = '#e6e6fa' ; }, methods: { focusInput: function() { this.items = []; this.textInput = ''; this.$refs.mytext.focus(); }, request() { console.log(this.textInput); } } }); </script> </body> </html> ```

退会済みユーザー

2020/04/20 19:24

this.items[];の部分を入れるとinput textにフォーカスはあたるのですがテキストがクリアされずという状況です。この部分はaxiosで取得したテーブルが検索結果として表示される部分で再検索ごとに非表示にしています。取り急ぎご回答いただきましてありがとうございます。

行動規範の内容に同意します