vue - v-bind: класс. ,как реагировать со значением вычисляемого свойства объекта (вложенного)? - PullRequest
0 голосов
/ 11 декабря 2019

Необходимо присвоить класс значению элемента входящей почты в vue, когда значение равно string = 'null'. Я почти получил его на работу, однако, не могу понять одну вещь. Следуя этим примерам https://vuejs.org/v2/guide/class-and-style.html,, тем не менее, есть некоторые особенности. Мне нужно иметь возможность определить класс на основе значения вычисляемого свойства. ,вложенный,У меня есть форма с кучей полей ввода (v-for), и я должен проверить значение для каждого и назначить определенный класс, если условие выполняется. Я могу сделать это только изначально, но не тогда, когда пользователь начинает изменять входное значение.

это для цикла:

<div
  class="form__field form__field--autocomplete"
  v-for="input in info"
  :key="input.PARAMETER_NAME"
  v-if="input.PARAMETER_NAME != 'p_euser' && input.PARAMETER_NAME != 'p_dbuser_password'"
>

, и это один из примеров поля. ,Есть и другие, основанные на вводе. ДАННЫЕ_TYPE

<input
    v-else-if="input.DATA_TYPE == 'smallint' || input.DATA_TYPE == 'int'"
    v-model="recordComputed[input.PARAMETER_NAME]"
    type="number"
    class="form__field-input"
    v-bind:class="['', { 'nullclass' : [recordComputed[input.PARAMETER_NAME=='null']] }]"
    :disabled="input.i2_primary_key == '1' && method == 'edit'"
  >

Итак. .recordComputed - это основной объект (вычисляемое свойство.), определяемый как:

  recordComputed: {
   get () {
    let record = this.record
    this.info.forEach((input) => {
      var parValue = this.selected[input.i2_header_db]

      // if we do not have parValue and also it is an typeOf=='object', than we set it as null
      if (!parValue && typeof (parValue) === 'object') {
        parValue = 'null'
      }
      record[input.PARAMETER_NAME] = parValue
    })
    return record
  },

Так что мой вопрос. ,,Можно ли "реактивно" прочитать значение из вычисляемого свойства. ,значение одного из его ключей, чтобы изменить класс только для этого конкретного поля ввода. Если есть альтернативы, были бы открыты для предложений.

1 Ответ

0 голосов
/ 13 декабря 2019

Я нашел относительно грязное решение. Вместо оценки по значению поля, которое работает только для начальной оценки, я создал другое свойство (isNullText), а в методе checkForNulls присваиваем значение true или false на основе значения свойства recordComputed. Так . ,это кусочки, которые решили это для меня:

data() {
    return {
        isNullText:[]
    }
}

затем в методах:

methods: { checkForNulls () { for (let [key, value] of Object.entries(this.recordComputed)) { console.log( $ {ключ}: $ {значение} ) if (value === 'null') { this.isNullText[key] = true } else { this.isNullText[key] = false } } } }

...