vue-v-bind：类。 .如何对计算属性对象（嵌套）的值做出反应？答案

【问题标题】：vue - v-bind:class . . how to react with a value of computed property object (nested)?vue-v-bind：类。 .如何对计算属性对象（嵌套）的值做出反应？
【发布时间】：2020-04-05 00:58:24
【问题描述】：

需要给vue中收件箱项的值赋值一个类，当值为string='null'时。我几乎让它工作，但是，我无法弄清楚一件事。一直在关注这个例子https://vuejs.org/v2/guide/class-and-style.html，但是，有一些细节。我需要能够根据计算属性的值定义类。 .嵌套的 . . 我有一个带有一堆输入字段（v-for）的表单，如果满足条件，我应该检查每个字段的值并分配特定的类。我只能在开始时这样做，但不能在用户开始更改输入值时这样做。

这是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'"
>

这是 field 的一个例子。 .还有其他的，基于 input.DATA_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
  },

所以我的问题是。 . .是否可以从计算属性“响应”读取值。 .它的一个键值，以便仅更改此特定输入字段的类。如果有替代品，欢迎提出建议。

【问题讨论】：

标签： javascript css vuejs2 watch

【解决方案1】：

完全有可能……

<template>
  <div>
    <div v-for="input in inputs" :key="input.id">
      <input type="text" :class="{ active : getIsActive[input.id - 1] }" :value="input.name">
    </div>
    <input type="checkbox" v-model="odd"> Odd ?
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      inputs: [
        { name: "input 1", id: 1 },
        { name: "input 2", id: 2 },
        { name: "input 3", id: 3 },
        { name: "input 4", id: 4 }
      ],
      odd: false
    };
  },
  computed: {
    getIsActive() {
      return this.inputs.map(item => item.id % 2 === (this.odd ? 1 : 0));
    }
  }
};
</script>

<style scoped>
.active {
  background-color: #42b983;
}

input {
  margin: 10px;
}
</style>

你的类绑定看起来很奇怪

v-bind:class="['', { 'nullclass' : [recordComputed[input.PARAMETER_NAME=='null']] }]"

为什么你使用input.PARAMETER_NAME=='null' 作为计算属性的索引？还有太多的方括号。而'null'真的很奇怪，为什么不用null呢？

应该是这样吧？

v-bind:class="{ 'nullclass' : recordComputed[input.PARAMETER_NAME]==='null' }"

【讨论】：

【解决方案2】：

我找到了相对肮脏的解决方案。我没有针对仅适用于初始评估的字段值进行评估，而是创建了另一个属性 (isNullText)，并在方法 checkForNulls 中根据 recordComputed 属性的值分配 true 或 false。所以。 .这是为我解决它的部分：

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

然后在方法中：

methods: { checkForNulls () { for (let [key, value] of Object.entries(this.recordComputed)) { console.log(${key}: ${value}) if (value === 'null') { this.isNullText[key] = true } else { this.isNullText[key] = false } } } }

【讨论】：