добавление класса к элементу в компоненте Vuejs изменяет все экземпляры этого компонента - PullRequest
Новая
       32

добавление класса к элементу в компоненте Vuejs изменяет все экземпляры этого компонента

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

Я написал смонтированную функцию для условного добавления и удаления классов из элемента в компоненте Vuejs.Похоже, что функция добавляет класс к элементу не только в этом экземпляре компонента, но и во всех экземплярах этого компонента.Почему это?Мне нужно использовать ссылки?Большой контекст - это форма.Каждый экземпляр этого компонента является полем формы с плавающей меткой.Причиной добавления и удаления класса является создание плавающей метки.

Также представляется, что mutableFieldContent === '' никогда не выполняется, даже если mutableFieldContent является пустым / неопределенным.Не знаю, почему это так.

Я новичок в Stack Overflow.Я прошу прощения, если это будет два вопроса.

Спасибо! 

<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="mutableFieldContent" @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},
    data() {
        return {
            mutableFieldContent: this.fieldContent
        }
    },
    methods: {
        setActive(active, event) {
            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')
            }
        }
    },
    mounted() {
        console.log("this.mutableFieldContent: "+this.mutableFieldContent);
        console.log("classList of element: "+ $("#outerdiv")[0].classList);
        this.mutableFieldContent === ""?

            (console.log("fieldContent is empty"), 
            $("#outerdiv")[0].classList.remove('form-field--is-filled')):

            (console.log("fieldContent exists"),
            ($("#outerdiv")[0].classList.add('form-field--is-filled')))
    }
}
</script>

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

И вот где я вставляю компонент ... 

      <div v-for="field in category.fields" v-bind:key="field.label">
                                            <div class="row">
                                                <div class="col">
                                                    <div v-if="!field.haschoices">
                                                        <FormField
                                                            :fieldContent="person[field.personfield]"
                                                            :fieldLabel="field.label"
                                                        ></FormField>     
                                                    </div>
...