Блог

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

 <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. Снимите флажок, и привязка исчезнет.

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

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

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

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

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

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

 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)
      }
    }
  }
}