How to make this simple Vue.js code work for a beginner

Question

I know this question is a duplicate or whatever, but I really need your help. I'm so new with Vue and this is my first Vue.js code and I just followed what they said in the tutorial so I'm lost on why it's not working.

Can you guys help me with this?

here is my code:

<!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>

error:

[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'
  },

here the variable name is userName. but on html part you have used name

change this to

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

Hope this solves the issue

How to make this simple Vue.js code work for a beginner

Question

1 answers

solution1
0 2020-03-10 09:36:54

How to make this simple Vue.js code work for a beginner

Question

1 answers

solution1 0 2020-03-10 09:36:54

solution1
0 2020-03-10 09:36:54