[Vuejs]-Javascript error when assigning css class to textArea

by

1👍

✅

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

Hope this helps!

👤Alessi 42

4👍

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

👤Lennholm

1👍

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>
👤Roy J

Leave a comment