清除来自 parent 的输入 VUE 组件数据

Question

我是 Vue 的新手，我试图在提交后简单地清除输入组件的数据，但似乎我遗漏了什么，因为它是 parent 数据清空了，还是看到了输入组件的填充值。

我已经从它的 parent 包装器设置为输入 child 组件 v-model="title"。一旦我将数据提交到 parent，我调用 addItem，最后，我应该通过清除它 this.title = '' 来清除数据模型，但我可能做错了什么将数据从 parent 绑定到 child.

在代码上方，从 parent 组件开始：

<template>
  <form @submit="addItem" class="todo-insert">
    <input-item
      icon="create"
      name="title"
      placeholder="Add a ToVue item..."
      v-model="title"
    />
    <button-item tone="confirm" class="todo-insert__action">
      Aggiungi
    </button-item>
  </form>
</template>

<script>
import ButtonItem from '@vue/Form/ButtonItem/ButtonItem.vue'
import InputItem from '@vue/Form/InputItem/InputItem.vue'
import uuid from 'uuid'

export default {
  name: 'TodoInsert',
  components: {
    ButtonItem,
    InputItem
  },
  data () {
    return {
      title: ''
    }
  },
  methods: {
    addItem (e) {
      e.preventDefault()
      const todo = {
        id: uuid.v4(),
        isComplete: false,
        title: this.title
      }
      this.$emit('add-todo', todo)
      this.title = ''
    }
  }
}
</script>
<style lang="scss" scoped src="./TodoList.scss"></style>

这是 child 输入组件：

<template lang="html">
  <label class="input">
    <div v-if="label" class="input__label text-sans text-sans--label">
      {{ label }}
    </div>
    <div class="input__row">
      <input
        :autocomplete="autocomplete"
        :class="[hasPlaceholderLabel, isDirty]"
        :name="name"
        :placeholder="placeholder"
        class="input__field"
        type="text"
        v-on:input="updateValue($event.target.value)"
        v-on:blur="updateValue($event.target.value)"
      >
      <div v-if="placeholderLabel" class="input__placeholder text-sans text-sans--placeholder">
        {{ placeholderLabel }}
      </div>
      <div v-if="icon" class="input__icon-area">
        <icon-item
          :name="icon"
        />
      </div>
      </div>
  </label>
</template>

<script>
import IconItem from '../../IconItem/IconItem.vue'

export default {
  name: 'InputItem',
  props: {
    autocomplete: {
      type: String,
      default: 'off'
    },
    icon: String,
    label: String,
    name: {
      type: String,
      default: 'input-text'
    },
    placeholder: String,
    placeholderLabel: String
  },
  computed: {
    hasPlaceholderLabel () {
      return this.placeholderLabel ? 'input__field--placeholder-label' : ''
    },
    isDirty () {
      // return this.$attrs.value ? 'input__field--dirty' : ''
      return 'input__field--dirty'
    }
  },
  methods: {
    updateValue: function (value) {
      this.$emit('input', value)
    }
  },
  components: {
    IconItem
  }
}
</script>
<style lang="scss" src="./InputItem.scss"></style>

我错过了什么？

Answer 1

您的 child 组件是单向绑定的。这意味着它可以更改值，但不会从 parent 组件接收任何更新。要接收更新，您需要在 child:

中接收属性 value

props: {
  value: String
}

然后，您需要将接收到的值传递给输入：

<input
    :value="value"
    :autocomplete="autocomplete"
    :class="[hasPlaceholderLabel, isDirty]"
    :name="name"
    :placeholder="placeholder"
    class="input__field"
    type="text"
    v-on:input="updateValue($event.target.value)"
    v-on:blur="updateValue($event.target.value)"
  >

现在，当 parent 组件更改值时，输入应该更新

清除来自 parent 的输入 VUE 组件数据

Clear input VUE component data from parent

javascript

vue.js

data-binding

vuejs2

2-way-object-databinding