如何让这个简单的 Vue.js 代码适合初学者答案

【问题标题】：How to make this simple Vue.js code work for a beginner如何让这个简单的 Vue.js 代码适合初学者
【发布时间】：2020-06-22 04:04:44
【问题描述】：

我知道这个问题是重复的或其他问题，但我真的需要你的帮助。我对 Vue 很陌生，这是我的第一个 Vue.js 代码，我只是按照他们在教程中所说的，所以我不知道为什么它不起作用。

你们能帮我解决这个问题吗？

这是我的代码：

<!DOCTYPE html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>   
</head>

<body>
    <script type="x-template" id="form-template">
        <label>{{inputLabel}} :</label>
        <input type="text" v-model="name" />
      </script>

      <div id="app">
        <h2>{{appName}}</h2>
        <form-component title="This is a form" v-bind:name="userName"></form-component>
      </div>    
</body>
</html>
<script>  
var formComponent = {
  template: '#form-template',
  props: ['title', 'name'],
  data: function() {
    return {
      inputLabel: 'Name'
    }
  }
};

var vue = new Vue({
  el: '#app',
  data: {
    appName: 'Component Demo',
    userName: 'John Doe'
  },
  components: {
    'form-component': formComponent
  }
});

</script>

错误：

[Vue warn]: Error compiling template:

Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

1  |  
2  |          <label>{{inputLabel}} :</label>
3  |          <input type="text" v-model="name" />
   |          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
4  |        
   |  ^^^^^^

found in

---> <FormComponent>
       <Root>

【问题讨论】：

添加一个包含 <script type="x-template" id="form-template"> 内所有内容的包含元素（例如，一个 div）...错误消息非常不言自明
Yout html 无效...它没有正确嵌套...查看开始和结束脚本标签
@Mischa - HTML 没有任何问题 - 哦，等等……最后一个脚本标签！！尽管如此，所有浏览器都会接受这一点，这不是错误的根源
这能回答你的问题吗？ Vue js error: Component template should contain exactly one root element
<script type="x-template" id="form-template"><div>您的当前内容</div></script>

标签： javascript vue.js

【解决方案1】：

  data: {
    appName: 'Component Demo',
    userName: 'John Doe'
  },

这里的变量名是用户名。但是在 html 部分你使用了name

把这个改成

<input type="text" v-model="userName" />

希望这能解决问题

【讨论】：

我试试这个；)