소품을 사용하여 v-model을 초기화하시겠습니까?

소품을 사용하여 v-model을 초기화하시겠습니까?

v-model을 사용하는 Vue 구성 요소를 생성하려고 합니다.v-model의 초기 값은 결국 상위 구성 요소 또는 데이터스토어에서 가져옵니다.작업을 시작하려는 첫 번째 단계는 속성을 사용하여 v-model을 초기화하는 것입니다.다음을 시도했지만 성공하지 못했습니다.

<template>
  <div>
    <textarea
      v-model="text"
    ></textarea>
  </div>
</template>

<script>
export default {
  props: { initialValue: String },
  data() {
    return {
      text: this.props ? this.props.initialValue : 'This is a test'
    }
  }
}
</script>

그리고 부모로부터 다음과 같이 사용합니다.

<MyComponent initialValue="Hello World" />

컴포넌트에 Hello World가 아닌 This is test로 표시됩니다.v-model을 사용하는 구성 요소를 초기화하는 적절한 방법은 무엇입니까?

편집

일단 v-model을 포기하고 이 방법을 생각해 냈습니다.'Vue-ly' 느낌이 안 들어요.기본적으로 텍스트 영역의 구현 세부사항(eve.srcElement.value.length)을 탭하고 있습니다.도메인 개체를 탭해야 할 것 같습니다.더 좋은 방법은 없을까?textChange 이벤트에서는 다른 컴포넌트에 대한 알림이 발송됩니다.

<template>
  <div>
    <textarea
      :value="initialValue"
      @change="textChange"
      @keyup="textChange"
      placeholder="Type your text here"
    ></textarea>
  </div>
</template>

<script>
export default {
  props: { initialValue: String },
  methods: {
    textChange: function(evt) {
      console.log('Length: ' + evt.srcElement.value.length)
    }
  }
}
</script>

v-model를 활용하다value소품. 당신은 그 소품들을 방출해야 합니다.inputevent를 클릭하여 부모 값을 업데이트합니다.

마이 컴포넌트표시하다

<template>
  <div>
    <textarea :value="value" @input="$emit('input', $event.target.value)"></textarea>
  </div>
</template>

<script>
export default {
  props: ['value']
}
</script>

Parent.vue

<MyComponent v-model="val"/>

자세한 내용은 구성 요소에서 v-model 사용을 참조하십시오.

언급URL : https://stackoverflow.com/questions/53694707/initialize-v-model-using-props