質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Firefox

Mozilla Foundationによって作られた無料、オープンソース、クロスプラットフォームなウェブブラウザ

Q&A

解決済

2回答

815閲覧

Vue.js: Firefoxのバグ(?)で画面の更新がうまくいかない。

hogemania

総合スコア18

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Firefox

Mozilla Foundationによって作られた無料、オープンソース、クロスプラットフォームなウェブブラウザ

0グッド

0クリップ

投稿2017/08/04 01:47

###前提・実現したいこと
クリックしたテキストを書き換えるだけなのですが、Firefoxではクリック位置より右側の表示が残ってしまって困っています。
Firefoxのバグだと思いますが、回避策はないでしょうか。

###該当のソースコード

html

1<div id="app"> 2 <div id="text" v-on:click="changeText"> 3 <pre>{{ text }}</pre> 4 </div> 5</div>

javascript

1var app; 2app = new Vue({ 3 el: "#app", 4 data: { 5 text: "このテキストの中程をクリックしてください。", 6 }, 7 methods: { 8 changeText: function (e) { 9 this.text = "★"; 10 } 11 } 12});

https://jsfiddle.net/f8smhjoL/2/

###試したこと

app.textに値をセットした後、自力でDOMの操作で書き換えればつじつまを合わせられますが、それでは何のためのVue.jsなのかわからなくなってしまいます。

###補足情報(言語/FW/ツール等のバージョンなど)
Vue.js v2.4.2
Firefox 55.0

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

当方の環境では再現しませんでしたが、描画後のresizeで治る場合があります

javascript

1this.$nextTick(function() { 2 try { 3 document.dispatchEvent(new CustomEvent('resize')) 4 } catch (err) { /* IE用 */ } 5})

投稿2017/08/04 02:22

編集2017/08/04 02:28
YukiYonekura

総合スコア127

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hogemania

2017/08/04 02:54

回答ありがとうございます。 試してみましたが、残念ながら直りませんでした。
guest

0

自己解決

YukiYonekuraさんが再現しなかったというのが気になって、Firefoxをセーフモードで再起動して確認したところ、再現しなくなりました。
調べたところ、Words And Page Transrationというアドオンが原因であることがわかりました。
このアドオンはクリックした位置に非表示のspanを挿入しており、そのせいでテキストノードが分割されてしまい、このような現象になったようです。

お騒がせしました。m(__)m

投稿2017/08/04 06:33

hogemania

総合スコア18

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問