vue - значение привязки текстового поля не отражает фактическое значение - PullRequest
Новая
       77

vue - значение привязки текстового поля не отражает фактическое значение

0 голосов
/ 22 октября 2019

У меня есть простой компонент, который принимает значение prop и показывает текстовое поле для его редактирования. Если число ниже нуля , я хочу, чтобы оно было просто ноль , если текст удален из текстового поля, я хочу, чтобы оно было ноль . В моем emit событии я вижу, что выдает правильное значение, оно просто не отражается в самом текстовом поле.

У меня есть ссылка для скрипты здесь , но основные частиздесь перечислены ниже: 

<div id="app">
  <test-component v-model="foo"></test-component>
</div>

const TestComponent = {
    props: ['value'],
    template: `<div>{{value}}
    <input type="number" :value="value" @input="update($event.target.value)" />
  </div>`,
  methods: {
    update(value) {
      this.$emit("input", value <= 0 ? 0 : value)
    }
  }
}
new Vue({
  el: "#app",
  components: {
    'test-component': TestComponent
  },
  data: {
    foo: 1
  },

})

В основном происходит то, что я вижу, что мое событие отправляется со значением 0, но, как вы видите, {{value}} отражает то, чтов опоре однако напечатанное значение в самом textfield само по себе пустое (или меньше нуля)

Здесь определенно есть что-то фундаментальное, что я неправильно понимаю, я подумал, что:ценность должна отражать реальность, но, очевидно, нет. Любая помощь ценится!

Ответы [ 2 ]

1 голос
/ 22 октября 2019

Вам нужно поставить key на TestComponent, а затем каждый раз, когда обновляется foo, менять ключ, это должно вызвать повторную визуализацию, которая является проблемой здесь.

0 голосов
/ 22 октября 2019

Согласно ответу @ Майкла, хитрость заключалась в том, чтобы использовать key для запуска повторного рендеринга.

здесь есть новая скрипка , она не особо элегантна, я просто хотелчтобы начать сначала:)

Обновлены элементы здесь: 

<div id="app">
  <test-component :key="key" :value="foo" @input="input"></test-component>
</div>


const TestComponent = {
    props: ['value'],
    template: `<div>
    <input type="number" :value="value" @input="update($event.target.value)" />
  </div>`,
  methods: {
    update(value) {
      this.$emit("input", value <= 0 ? 0 : value)
    }
  }
}
new Vue({
  el: "#app",
  components: {
    'test-component': TestComponent
  },
  data: {
    key: 0,
    foo: 1
  },
  methods: {
    input (value) {
      this.foo = value;
      this.key += 1;
    }
  }

})
...