CSSAクラスをtextAreaに割り当てるときのJavascriptエラー

Question

Safariデスクトップ/モバイルとInternet Explorerで問題が発生しています。エラー読み取り：サファリで

：TypeError: Attempted to assign to readonly property.

IEエッジ：Assignment to read-only properties is not allowed in strict mode

これは、ページ上のすべてのテキストエリアをループとに基づいて、各テキスト領域の特定のCSSクラスを設定する機能で起こっています文字数（フォントサイズが変わります）。

私の質問は以下のとおりです。私はCSSクラスを適用していたときに

• はなぜこのエラーが発生していますか？
• 私はそれを防ぐために何ができますか？

私はLaravel 5.4とVueJS 2.1.10を使用しています。

ここには私が問題を再現したa codepen linkがあります。 （ChromeとFireFoxで動作することがわかります）。

本当にありがとうございます。ありがとう

Answer 1

mozilla api

ごとにこの情報がお役に立てば幸いとしてcard.classList.add('font_normal');でcard.classList += 'font_normal';を交換してください！

Answer 2

値を直接classListに割り当てないでください。読み取り専用であり、演算子で変更できる機能はすべて標準ではありません。

代わりにclassList.add()を使用してください。
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

Answer 3

DOMを使いこなすべきではありません。 Vueとの契約は、それがDOMを制御することであり、あなたはそれがどのように表示され動作するかを記述するモデルを提供します。この場合、v-bind:classを使用する必要があります。あなたは

DOMをいじり

const app = new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    showPublicStacks: [{ 
 
     id: 1, 
 
     public_category_title: "Spanish 101" 
 
     }, 
 
     { 
 
     id: 3, 
 
     public_category_title: "African Capitals. Plus extra characters to test smaller font" 
 
     }, 
 
     { 
 
     id: 2, 
 
     public_category_title: "USA Capitals" 
 
     } 
 
    ] 
 
    } 
 
});

#app { 
 
    display: flex; 
 
    width: 100%; 
 
} 
 

 
.width_33 { 
 
    flex: 0 0 33.333%; 
 
} 
 

 

 
/* Fonts */ 
 

 
.font_normal { 
 
    font-size: 2em; 
 
} 
 

 
.font_small { 
 
    font-size: 1em; 
 
} 
 

 

 
/* Cards */ 
 

 
div.media_container { 
 
    background: #ffffff; 
 
    padding: 10px; 
 
    box-shadow: 0 2px 7px rgba(0, 0, 0, .2); 
 
    transition: .2s ease-in; 
 
    border-radius: 4px; 
 
} 
 

 
.card_input_area { 
 
    width: 100%; 
 
    height: 100px; 
 
    margin-top: 10px; 
 
    padding-top: 10px; 
 
    border: none; 
 
    font-family: sans-serif; 
 
    color: grey; 
 
    background-color: #ffffff; 
 
    text-align: center; 
 
    padding: 20px; 
 
    transition: 300ms ease-in; 
 
    -webkit-transition: 300ms ease-in; 
 
    animation: show_text 210ms; 
 
    cursor: pointer; 
 
}

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script> 
 
<div id="app"> 
 
    <span class="width_33" v-for="stack in showPublicStacks" :stack="stack" :id="'column_'+stack.id" v-bind:key="stack"> 
 
    <div class="media_container"> 
 
    <textarea class="card_input_area" :class="stack.public_category_title.length > 35 ? 'font_small' : 'font_normal'" v-model.trim="stack.public_category_title"></textarea> 
 
    </div> 
 
    </span> 
 
</div>