vue.js - 将数据传递给其他组件vue，不起作用

Question

我正在尝试将数据从一个组件传递到另一个组件。我的主要目标是为我的 <input text (comment-1 ######) 设置一个值，然后将该值传递给我的组件 <qrcode (comment-2 #####) 它不起作用，但是如果我直接向 myfirstname 属性（comment-3 ######）输入一个值，它可以工作，所以我认为我必须将输入元素（comment-1）与评论 3 中的 myfirstname 属性绑定。

或者，究竟是什么问题？

这是我的代码：

<template>
    <div>
            <table>
            <tr>
                <th>Vorname</th>
                  // Comment-1  ###########################
                <td><input type="text" id="Vorname" v-model="myfirstname"></td>
            </tr>
            <tr>
                <th>Name</th>
                <td><input type="text" id="Name"></td>
            </tr>
            <tr>
                <th>Telefon</th>
                <td><input type="text" id="Telefon"></td>
            </tr>
            <tr>
                <th>Handy (Private)</th>
                <td><input type="text" id="Handy"></td>
            </tr>
            <tr>
                <th>E-Mail</th>
                <td><input type="text" id="Email"></td>
            </tr>
            <tr>
                <th>Firma</th>
                <td><input type="text" id="Firma"></td>
            </tr>
            <tr>
                <th>Strasse</th>
                <td><input type="text" id="Strasse"></td>
            </tr>
            <tr>
                <th>Hausnummer</th>
                <td><input type="text" id="Hausnummer"></td>
            </tr>
            <tr>
                <th>Stadt</th>
                <td><input type="text" id="Stadt"></td>
            </tr>
            <tr>
                <th>Zipcode</th>
                <td><input type="text" id="Zipcode"></td>
            </tr>
            <tr>
                <th>Staat</th>
                <td><input type="text" id="Staat"></td>
            </tr>
            <tr>
                <th>Land</th>
                <td><input type="text" id="Land"></td>
            </tr>
            <tr>
                <th>Webseite</th>
                <td><input type="text" id="Webseite"></td>
            </tr>
                   // Comment-2  ###########################
            <qrcode :firstname="myfirstname" />
            <h1>{{myfirstname}}</h1>
        </table>
    </div>
</template>

<script>
import qrcode from './qrcode.vue'
export default {
    
    name:"myform",
    components:{
      qrcode
  },
  data: function(){
      return{
              // Comment-3 ###########################
          myfirstname:" "
      }
  },
  methods:{
      mychange(){
          this.myfirstname = document.getElementById("Vorname").value
          alert(this.myfirstname)
      }
  }
}
</script>

标签： vue.js