classList не определен для элемента, который определил классы - PullRequest
Новая
       22

classList не определен для элемента, который определил классы

1 голос
/ 15 мая 2019

Я пытаюсь добавить и удалить классы для элемента в Vuejs. Отсутствующая ссылка в моем коде состоит в том, что classList возвращает неопределенное значение. Почему это? Благодарю. Я получаю элемент с сокращенной записью jQuery getElementById $ 

<template>
    <div class="form-field" id="outerdiv">
        <div class="form-field__control">
            <label for="exampleField" class="form-field__label">{{fieldLabel}}</label>
            <input id="exampleField"  v-model="fieldContent" @blur="setActive(false, $event)" @focus="setActive(true, $event)"
            type="text" class="form-field__input" />
        </div>
    </div>    
</template>

<script>
import $ from "jquery";

export default {
    name: "FormField",
    props: {fieldContent: String, fieldLabel: String},
    methods: {
        setActive(active, event) {
            console.log("this.fieldContent: "+this.fieldContent);
            const formField = event.target.parentNode.parentNode
            if (active) {
                formField.classList.add('form-field--is-active')
            } else {
                formField.classList.remove('form-field--is-active')
                event.target.value === '' ? 
                formField.classList.remove('form-field--is-filled') : 
                formField.classList.add('form-field--is-filled')
            }
        }
    },
    updated() {
        console.log("in initialize form field");
        console.log("this.fieldContent: "+this.fieldContent);
        console.log("result from shorthand getElementById: "+$("#outerdiv"));
        console.log("classList of element: "+ $("#outerdiv").classList);
        this.fieldContent === '' ?
        $("#outerdiv").classList.remove('form-field--is-filled'):
        $("#outerdiv").classList.add('form-field--is-filled')
    }
}
</script>

<style>
    .form-control{
        border-style: none;
        width: 100%;
        height: 34px;
        padding: 0px 0px;
        font-size: 20px;
    }
</style>

1 Ответ

0 голосов
/ 15 мая 2019

Хотя ваша основная проблема была решена, вы можете упростить свой код и в то же время устранить потребность в jQuery, выполнив его способом Vue.

Используя привязки классов , вы можетезамените свои if на вычисленную реквизит, и если вам нужен прямой доступ к элементу, вы можете использовать refs .

. Просто запустите следующий фрагмент, чтобы увидеть эти концепции в действии: 

new Vue({
  el: '#app',
  data: {
    fieldContent: '', 
    fieldLabel: '',
    active: false,
  },
  computed: {
    classList() {
      return {
        'form-field--is-filled': this.fieldContent !== '',
        'form-field--is-active': this.active,
      };
    }
  },
  methods: {
    setActive(active, event) {
      console.log("this.fieldContent: "+this.fieldContent);

      this.active = active;
    }
  },
  updated() {
    console.log("in initialize form field");
    console.log("this.fieldContent: "+this.fieldContent);
    console.log("result from shorthand getElementById: ", this.$refs.outerDiv);
    console.log("classList of element: "+ this.$refs.outerDiv.classList);
  }
});
.form-control{
  border-style: none;
  width: 100%;
  height: 34px;
  padding: 0px 0px;
  font-size: 20px;
}

.form-field--is-active {
  border: 1px solid green;
}

.form-field--is-filled {
  outline: 1px dotted blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
    <div class="form-field" id="outerdiv" :class="classList" ref="outerDiv">
        <div class="form-field__control">
            <label for="exampleField" class="form-field__label">{{fieldLabel}}</label>
            <input id="exampleField"  v-model="fieldContent" @blur="setActive(false, $event)" @focus="setActive(true, $event)"
            type="text" class="form-field__input" />
        </div>
    </div>    
</div>
...