Функция рендеринга на входе удаляет реактивность в Vue - PullRequest
Новая
       8

Функция рендеринга на входе удаляет реактивность в Vue

0 голосов
/ 05 ноября 2018

Я пытаюсь создать функцию рендеринга, которая отображает поле input в Vue.

Я могу легко это сделать в обычном vue файле с такими шаблонами: 

// NormalInput.vue
<template>
  <input :value="value" />
</template>

<script>
export default {
  name: "NormalInput",
  props: {
    value: null
  }
};
</script>

Обратите внимание, что вышесказанное действительно работает правильно.

Но при попытке преобразовать вышеуказанный код в функцию рендеринга со следующим кодом: 

// RenderFunctionInput.js
export default {
  name: "RenderFunctionInput",
  props: {
    value: null
  },
  render(createElement) {
    return createElement("input", {
      attrs: { value: this.value }
    });
  }
};

Сначала он кажется реактивным, но после редактирования RenderFunctionInput вручную он перестает быть реактивным. Данные Vue, по-видимому, обновляются, но фактическое значение ввода отсутствует.

Вы можете посмотреть пример на https://codesandbox.io/embed/oooq7o2q16?module=%2Fsrc%2FApp.vue

Пример скриншотов:

Я создал пример двух компонентов, упомянутых выше. Они оба используют одно и то же значение данных, которое увеличивается на 1 каждые 100 мс.

Screenshot 1

Screenshot 2

После ввода NormalInput он мгновенно перезаписывается данными :value="val". Но при вводе RenderFunctionInput он перестает увеличиваться, отсоединяется от данных и становится неактивным.

enter image description here

1 Ответ

0 голосов
/ 05 ноября 2018

Вместо использования attrs в функции рендеринга, вы должны использовать domProps.

Как только содержимое ввода отредактировано, значение атрибута все еще обновляется в DOM (вы можете проверить свою консоль), но это атрибут больше не относится к тому, что отображается

https://github.com/vuejs/vue/issues/9027#issuecomment-435797509

Функция рендеринга должна выглядеть следующим образом: 

// RenderFunctionInput.js
export default {
  name: "RenderFunctionInput",
  props: {
    value: null
  },
  render(createElement) {
    return createElement("input", {
      domProps: { value: this.value }
    });
  }
};
...