如何讓這個簡單的 Vue.js 代碼適合初學者

Question

我知道這個問題是重復的，但我真的需要你的幫助。 我對 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>

Answer 1

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

這里的變量名是 userName。 但在 html 部分，您使用了name

將此更改為

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

希望這能解決問題

如何讓這個簡單的 Vue.js 代碼適合初學者

問題描述

1 個解決方案

解決方案1
0 2020-03-10 09:36:54

如何讓這個簡單的 Vue.js 代碼適合初學者

問題描述

1 個解決方案

解決方案1 0 2020-03-10 09:36:54

解決方案1
0 2020-03-10 09:36:54