installation - Githubissues

desch142 commented 3 years ago

Hey everyone, i am a total beginner in JavaScript and Vue.js . I don't understand, where I have to put the code snippets from the points Browser and Module in the README. I hope you get my problem.

hamed-ehtesham commented 3 years ago

Hi you only need to use one of them not both i suggest that you just add the codes from Browser section at the end of your html's body element

desch142 commented 3 years ago

Hi thank you for you answer. Do you mean the index.html ?

so something like :

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>....</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script type="text/javascript" src="node_modules/vuejs/dist/vue.min.js"></script>
    <script type="text/javascript" src="node_modules/pretty-checkbox-vue/dist/pretty-checkbox-vue.min.js"></script>
    <script type="text/javascript">
    Vue.use(PrettyCheckbox);
    </script>
  </body>
</html>

desch142 commented 3 years ago

If i put it like this, then i get the following error: [Vue warn]: Unknown custom element: <p-check> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Here is the code for my App.vue

<template>

  <div id="app">
    <h1>AIntC</h1>
          <div class="checkeditems">
            Checked Items: {{checkedItems}}
         </div>
         <div>
            <ul>
                <li v-for="data in mylist" v-bind:key="data.item"> 
                    <p-check class="p-default p-round p-thick" color="primary-o" :name="data.item" :value='data.item'         v-model="checkedItems">{{data.item}}</p-check>
                </li>
           </ul>
       </div>
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return{
      name : 'AIntC',
      checked : false,
      mylist : [
        {item : "CSRU"},
        {item : "MICU"},
        {item : "CCU"},
        {item : "NICU"},
        {item : "NWARD"},
        {item : "SICU"},
        {item : "TSICU"}
      ],
      checkedItems: []
    }

  },

}

</script>

If I instead use

import PrettyInput from 'pretty-checkbox-vue/input';
import PrettyCheck from 'pretty-checkbox-vue/check';
import PrettyRadio from 'pretty-checkbox-vue/radio';

Vue.component('p-input', PrettyInput);
Vue.component('p-check', PrettyCheck);
Vue.component('p-radio', PrettyRadio);

in the main.js then i get the message :

Could not find a declaration file for module 'pretty-checkbox-vue/check'.
'c:/Users/.../node_modules/pretty-checkbox-vue/check.js' implicitly has 'any' type. ts(7016)

once i hover over the import PrettyCheck from 'pretty-checkbox-vue/check with the cursor.

nina-mir commented 3 years ago

i got the same issue as above!

hamed-ehtesham / pretty-checkbox-vue

installation #37