将css类分配给textArea时出现Javascript错误

Question

I'm having a problem in Safari desktop / mobile and Internet Explorer. The error reads:

In Safari: TypeError: Attempted to assign to readonly property.

IE Edge: Assignment to read-only properties is not allowed in strict mode

It is happening in a function that loops through all textareas on the page and sets a specific css class on each textarea according to the character count (which changes the font-size).

My questions are:

• Why is this error occurring when I'm just applying a css class?
• What can I do to prevent it?

I'm using Laravel 5.4 and VueJS 2.1.10.

Here is a codepen link where I have replicated the problem. (You can see it works in Chrome and FireFox).

I will really appreciate any help. Thanks

Answer 1

Don't assign values directly to classList , it's read-only and any ability to modify it by operators is non-standard and unspecified.

Use classList.add() instead.
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

Answer 2

Replace card.classList += 'font_normal'; with card.classList.add('font_normal'); as per themozilla api

Hope this helps!

Answer 3

You should not be messing with the DOM. Your contract with Vue is that it will control the DOM and you will provide it a model that describes how things should appear and work. In this case, you should be using v-bind:class . It looks like you want to do something like

 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>