상위에서 VUE 구성 요소 데이터 입력 지우기

상위에서 VUE 구성 요소 데이터 입력 지우기

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

제가 무엇을 빠뜨리고 있나요?

자식 구성 요소는 단방향으로 바인딩되어 있음.값을 변경할 수 있지만 상위 구성 요소로부터 업데이트를 받지 못한다는 뜻이다.업데이트를 받으려면 속성을 받아야 함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)"
  >

이제 상위 구성 요소가 값을 변경하면 입력이 업데이트되어야 함

참조URL: https://stackoverflow.com/questions/57463880/clear-input-vue-component-data-from-parent