Question

我在Safari桌面/移动设备和Internet Explorer中遇到问题。错误如下：

在Safari中：TypeError: Attempted to assign to readonly property.

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

它发生在一个循环遍历页面上所有textareas的函数中，并根据字符数（改变字体大小）在每个textarea上设置一个特定的css类。

我的问题是：

为什么我只是在应用css类时会出现这个错误？
我该怎样做才能阻止它？

我正在使用Laravel 5.4和VueJS 2.1.10。

这是我a codepen link我已经复制了问题的地方。（你可以看到它适用于Chrome和FireFox）。

我真的很感激任何帮助。感谢

Answer 1

不要将值直接赋值给classList，它是只读的，运算符修改它的任何能力都是非标准的和未指定的。

请改用classList.add() https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

Answer 2

你不应该搞乱DOM。您与Vue的合同是它将控制DOM，您将为它提供一个描述事物应该如何显示和工作的模型。在这种情况下，您应该使用v-bind:class。看起来你想做像

这样的事情

＆＃13;

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"
      }
    ]
  }
});

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 3

根据mozilla api

将card.classList += 'font_normal';替换为card.classList.add('font_normal');

希望这有帮助！

将css类分配给textArea

3 个答案: