首页 文章

使用道具初始化v模型？

提问于
浏览 次
1

我正在尝试创建一个使用v-model的Vue组件 . v模型的初始值最终将来自父组件或数据存储 . 我试图开始工作的第一步是用属性初始化v模型 . 我试过以下没有成功：

<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' . 初始化使用v模型的组件的正确方法是什么？

EDIT

我现在已经放弃了v-model并提出了这种方法......但它并不觉得非常“Vue-ly”......我基本上是在挖掘textarea的实现细节（eve.srcElement.value . 当我觉得我应该进入域对象时...有更好的方法吗？请注意，在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>
vuejs2 vue-component

1 回答

  • 2

    v-model 利用 value 道具 . 您需要发出 input 事件然后更新父级中的值 .

    MyComponent.vue

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

    有关详细信息，请参阅Using v-model on Components .

    回复于

相关问题