Привязка объекта?

Question

Мне нужно привязать объект из флажков, в этом примере флажок - это его собственный компонент:

<input type="checkbox" :value="option.id" v-model="computedChecked">

Вот мои данные и вычислено:

data() {
    return {
        id: 1,
        title: 'test title',
        checked: {
            'users': {
            },
        },
    }
},

computed: {
    computedChecked: {
        get () {
            return this.checked['users'][what here ??];
        },
        set (value) {
            this.checked['users'][value] = {
                'id': this.id,
                'title': this.title,
            }
        }
    },
    ....

Приведенный выше пример немного грубоват, но должен показать вам идею того, чего я пытаюсь достичь:

1. Установите флажок, назначьте объект его привязке.
2. Снимите отметку, и привязка исчезла.

Хотя я не могу получить привязанность к стоимости.

Answer 1

Я предполагаю, что вы хотите, чтобы computedChecked действовал как массив, потому что, если это логическое значение, set получит true / false при установке / снятии флажка, и с ним должно быть легко работать.изменить.

Когда v-model входных данных флажка является массивом, Vue ожидает, что значения массива будут синхронизированы с проверенным состоянием, и при установке / снятии флажка будет назначена свежая копия массива текущего проверенного значения.values, iff:

• Массив текущей модели содержит целевое значение, и он не отмечен в событии
• Массив текущей модели не содержит целевого значения, и он проверяется вevent

Итак, чтобы ваш пример работал, вам нужно настроить ваш установщик так, чтобы при каждом изменении состояния проверки мы могли получать последнее состояние от получателя.

Вот эталонная реализация:

export default {
  name: 'CheckBoxExample',
  data () {
    return {
      id: 1,
      title: 'test title',
      checked: {
        users: {}
      }
    }
  },
  computed: {
    computedChecked: {
      get () {
        return Object.getOwnPropertyNames(this.checked.users).filter(p => !/^__/.test(p))
      },
      set (value) {
        let current = Object.getOwnPropertyNames(this.checked.users).filter(p => !/^__/.test(p))
        // calculate the difference
        let toAdd = []
        let toRemove = []
        for (let name of value) {
          if (current.indexOf(name) < 0) {
            toAdd.push(name)
          }
        }
        for (let name of current) {
          if (value.indexOf(name) < 0) {
            toRemove.push(name)
          }
        }
        for (let name of toRemove) {
          var obj = Object.assign({}, this.checked.users)
          delete obj[name]
          // we need to update users otherwise the getter won't react on the change
          this.checked.users = obj
        }
        for (let name of toAdd) {
          // update the users so that getter will react on the change
          this.checked.users = Object.assign({}, this.checked.users, {
            [name]: {
              'id': this.id,
              'title': this.title
            }
          })
        }
        console.log('current', current, 'value', value, 'add', toAdd, 'remove', toRemove, 'model', this.checked.users)
      }
    }
  }
}