pretty-checkbox-vue
pretty-checkbox-vue copied to clipboard
hamed-ehtesham
installation
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.
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
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>
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.
