從父級清除輸入的VUE組件數據

Question

我是Vue的新手，提交后我試圖簡單地清除輸入組件的數據，但似乎丟失了一些東西，因為由於清除了父數據，所以我仍然看到填充值輸入組件的

這是一個生動的例子 。

我已將其父包裝器設置為輸入子組件v-model="title" 。 將數據提交給父級后，我會調用addItem ，最后我應該通過清除this.title = ''來清除數據模型，但是在如何將數據從父級綁定到子級方面我可能做錯了。

在代碼上方，從父組件開始：

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

這是子輸入組件：

<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

您的子組件是單向綁定的。 這意味着它可以更改值，但不會從父組件接收任何更新。 要接收更新，您需要在孩子中接收屬性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)"
  >

現在，當父組件更改值時，輸入應該更新