Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

installation #37

Open
desch142 opened this issue Sep 30, 2020 · 4 comments
Open

installation #37

desch142 opened this issue Sep 30, 2020 · 4 comments
Labels
question

Comments

@desch142
Copy link

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
Copy link
Owner

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
Copy link
Author

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
Copy link
Author

desch142 commented Oct 1, 2020

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
Copy link

nina-mir commented Apr 3, 2021

i got the same issue as above!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
question
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@hamed-ehtesham @nina-mir @desch142