实例 Vue 演示 v-model 指令不适用于使用 <component> 元素创建的 <input> 元素

<template>

  <h1>Dynamic Components</h1>

  <p><mark>The v-model directive does not work with input element created with the component element.</mark></p>

  <hr>

  <p>Does not work, not updating:</p>

  <component is="input" type="number" v-model="inpVal1"></component> (try to change value)

  <p class="pResult1">inpVal1: {{ inpVal1 }}</p>

  <hr>

  <p>How it should work, updates:</p>

  <input type="number" v-model="inpVal2"> (try to change value)

  <p class="pResult2">inpVal2: {{ inpVal2 }}</p>

</template>

​

<script>

export default {

  data() {

    return {

      inpVal1: 4,

      inpVal2: 7,

    }

  }

}

</script>

​

<style>

#app {

  width: 350px;

  margin: 10px;

}

.pResult1 {

  background-color: lightpink;

  font-family: 'Courier New', Courier, monospace;

  font-weight: bold;

  padding: 5px;

}

.pResult2 {

  background-color: lightgreen;

  font-family: 'Courier New', Courier, monospace;

  font-weight: bold;

  padding: 5px;

}

</style>