v-модель объединяет строку с переменной?

Question

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

Мне нужно объединить строку с переменной в v-model для привязки к массиву внутри объекта:

<li v-for="name in names">
    <input type="checkbox" v-model="'checked.'+name">
    ....

Я просто получаю ошибку компиляции.

Также, когда я делаю это:

:data-test="'checked.'+name"

Он прекрасно компилируется, так что это что-то с v-моделью.

Ошибка компиляции:

Syntax Error: SyntaxError: Unexpected token (1:1161)

Answer 1

На всякий случай помогает немного другая перспектива: если вы используете ее в директиве v-model или :data-test

'checked.'+name

, то получите строку.Хотя это, вероятно, не то, что обычно хочется делать, это синтаксически допустимо для произвольного v-bind (например, :data-test).Это, однако, синтаксически законно для v-model.Как уже отмечалось, v-model пытается присвоить значение событиям "change".Это было бы эквивалентно, например,

'checked.foo' = true;

, когда я думаю, что вы хотите

checked.foo = true;

Трудно сказать наверняка, не видя больше вашего кода, но это можетВ таком случае вам достаточно

<input type="checkbox" v-model="checked[name]">

.

Answer 2

v-model="name" помогает вам сделать две вещи.

1. :value="name"
2. @input="name = $event

Однако в вашем случае выВы делаете v-model="'checked.'+name", что означает:

1. :value="'checked.'+name" // which is perfectly fine
2. @input="'checked.'+name = $event" // this would cause an error.

Документация может быть найдена здесь .

Ниже приведены некоторые мои решения: JsFiddle

  computed: {
    checkedName: {
      // getter
      get: function () {
        return `${this.prefix}${this.name}`;
      },
      // setter
      set: function (newValue) {
        this.name = newValue.replace(this.prefix, '');
      }
    }
  },

затем

<input type="checkbox" v-model="checkedName">

Answer 3

Вы не можете сделать это.

v-model используется для двусторонней привязки данных и является синтаксическим сахаром для :checked="myField" + @change="evt => myField = evt.target.checked в случае флажка.

Как видите, myField должно быть допустимым левым выражением в JS, кстати, одно из правил проверено Vue, чтобы иметь действительное v-model:

Директива не имеет значения атрибута, действительного как LHS.Например, <input v-model="foo() + bar()">

И именно поэтому ваш шаблон не компилируется.Vue может понять, как связать данные одним способом, потому что он может присвоить 'checked.'+name переменной, но не может присвоить переменную 'checked.'+name - это не является допустимым выражением знака слева.