I would like to create a component for i-check but I cannot get the v-model data during form submission.
I can do it via normal input element.
Below is an example. Thanks
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://unpkg.com/vue"></script>
<title>JS Bin</title>
</head>
<body>
<div id=wrap>
<ichecker id="test" checked v-model="formData.checkbox"></ichecker>
<!--<input type=checkbox checked v-model="formData.checkbox" />-->
<button v-on:click.prevent=submit()>Submit</button>
</div>
</body>
</html>
Vue.component('ichecker', {
props: ['id', 'checked'],
model: {
prop: 'checked',
event: 'change'
},
template: "<input type='checkbox' :id='id' />",
mounted: () => {
// var $el = jQuery(`#${this.id}`);
// $el.iCheck({.....
}
});
new Vue ({
el: '#wrap',
data: {
formData : {
checkbox : ''
}
},
methods: {
submit: function() {
document.body.appendChild(document.createTextNode(this.formData.checkbox?'true ':'false '));
// form submission
}
}
});
https://jsbin.com/jugerigeto/edit?html,js,output
You are in a quite particular scenario where the <input> itself is the root element of your component. So you can't use v-model if you want to listen to the native event, cause it only exists on v-on. v-model is just a shorcut thought, and you can do it easily like this:
HTML:
<ichecker :checked="formData.checkbox"
#change.native="formData.checkbox = $event.target.checked">
</ichecker>
JS:
Vue.component('ichecker', {
prop: ['checked'],
template: '<input type="checkbox" :checked="checked" />'
});
https://jsbin.com/suvonolita/edit?html,js,output
You may also want to do it without the native event, if the input is not your root node. Or you may really want v-model. The way to implement v-model on a custom component is described there: https://v2.vuejs.org/v2/guide/components.html#Customizing-Component-v-model
Related
Vue - #input is triggered by :placeholder in Internet Explorer 11 immediately upon page load not when entering a value. That is, the problem is only in the explorer. When the page loads, input is triggered immediately, but only if there is a placeholder
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег SCRIPT</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<component-c/>
</div>
<script type="text/javascript">
var ComponentA = Vue.component('ComponentA', {
props: ['field'],
methods: {
//#input is triggered by :placeholder in Interner Exployer 11 immediately upon page load not when entering a value
validator: function (ev){
console.log(ev.target.value, 'value in validator');
}
},
computed: {
fieldPlaceholder: function () {
return this.field.placeholder;
},
},
template: '<input type="password" #input="validator" :placeholder = "fieldPlaceholder">'
});
var ComponentС = Vue.component('ComponentB', {
data: function () {
return {
field: {
placeholder: 'place'
}
}
},
components: {
'component-a': ComponentA,
},
template: '<component-a :field = "this.field" />'
})
var app = new Vue({
el: '#app',
components: {
'component-c': ComponentС,
}
})
</script>
</body>
</html>
I'm trying to figure out how to get a child component to communicate with the parent component, without having a hard binding between them.
From what I've read, custom events should be the thing. But I can't get the parent component to receive and act on the event.
In my sample below I expect clicking on the "Do stuff" button in <child> to trigger doStuff() in <parent>. I see the log message that indicates the button was clicked, but I see no log message indicating that the emitted message was ever received by the parent.
Sample HTML:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<parent>
<child></child>
</parent>
</div>
</body>
</html>
Sample Javascript:
Vue.component('parent', {
props: [],
template: `
<div v-on:stuff="doStuff">
<h1>Hello World (from parent)!</h1>
<slot></slot>
</div>
`,
methods: {
doStuff: function() {
console.log('Do stuff');
}
}
});
Vue.component('child', {
props: [],
template: `
<div>
Hello World (from child)!<br>
<button v-on:click="performClick">Do stuff</button>
</div>
`,
methods: {
performClick: function() {
console.log('Do something');
this.$emit('stuff');
}
}
});
var app = new Vue({
el: '#app',
})
You access to emitted is wrong . stuff is emitted from child component so you need to access that emit in child component tag so you should use child component tag in parent component template . Like below
Vue.component('parent', {
props: [],
template: `
<div>
<h1>Hello World (from parent)!</h1>
<slot :test="doStuff"></slot>
</div>
`,
methods: {
doStuff: function() {
console.log('Do stuff');
}
}
});
Vue.component('child', {
props: [],
template: `
<div>
Hello World (from child)!<br>
<button v-on:click="performClick">Do stuff</button>
</div>
`,
methods: {
performClick: function() {
console.log('Do something');
this.$emit('stuff');
}
}
});
var app = new Vue({
el: '#app'
})
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<parent>
<template slot-scope="scope"><child v-on:stuff="scope.test"></child></template>
</parent>
</div>
</body>
</html>
Updated
You need to use slot and set slot-scope in parent component by setting like :{scopeName} and then you can access from template by slot-scope . When child component is emitted , you just need to call that {scopeName}
Edited to correct unreported syntax error (see comments). It now works as desired.
I'm having trouble getting my event handler to fire in the following Vue code.
As you see, there are two components, posts and post, and a root Vue instance. The button in the post template should fire the remove event, which is captured by the v-on:remove handler in posts which calls posts.deleteItem with the index of the post. Can someone give me a hint what I'm doing wrong?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Posts</title>
<!--link href="../css/bootstrap.css" rel="stylesheet" /-->
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<posts></posts>
</div>
<script>
window.onload = function() {
// A post
Vue.component('post-item', {
props: ['post'],
data: function() {
return {
editing: false,
_cachedItem: ''
}
},
methods: {
deleteItem(postId) {
debugger
this.$emit('remove', event.target.value);
},
},
template: `
<div v-on:remove="deleteItem">
<li v-show="!editing">
<p v-html="post.text"></p>
<button v-on:click="$emit('remove')">Delete</button>
</li>
</div>
`
})
Vue.component('posts', {
data: function() {
return {
posts: [
{id: 0, text: "Day at beach"},
{id: 1, text: "Carving the canyons"},
{id: 2, text: "Kickin' it"}
],
};
},
methods: {
deleteItem(index) {
debugger
this.posts.splice(index, 1);
}
},
template: `
<div>
<ol>
<post-item
v-for="(post, index) in posts"
v-bind:post="post"
v-bind:key="post.id"
v-on:remove="deleteItem(index)" />
</ol>
</div>
`
});
// Root Vue instance
new Vue({
el: '#app'
});
}
</script>
</body>
</html>
Looks like you're getting a little confused with the event creation and handling.
Events are emitted up to parent components. You don't typically add an event listener within the same component.
All you really need in your post-item component is to emit the remove event with the appropriate data (ie, the post object)
<div>
<li v-show="!editing">
<p v-html="post.text"></p>
<button #click="$emit('remove', post)">Delete</button>
</li>
</div>
Then in your parent component (posts), listen for this event on the post-item component and assign the event handler
<post-item v-for="post in posts" :key="post.id" :post="post" #remove="deleteItem" />
and handle the event with post payload
methods: {
deleteItem (post) {
this.posts.splice(this.posts.indexOf(post), 1)
}
}
The post object emitted by the post-item component should be the very same object passed in to its prop which is why you can directly use this.posts.indexOf(post). There's no need to go searching for matching id properties.
I am a fresher.I try to use scope slot and directive to create a list sample ,the code follow:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作用域插槽</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<div id="app">
<app></app>
</div>
</body>
<script>
Vue.directive("selectall",{
bind:function(el,binding,vnode,oldVnode){
var arg = binding.arg,
value = binding.value;
console.log(arg,value);
$(el).on('change',function(){
});
}
});
Vue.component("list",{
template:"<div><ul>"
+"<slot name='item' v-for='item in litodos' :text= 'item.text' :time='item.time' :idx='item.idx'></slot>"
+"</ul>"
+"</div>",
props:['litodos'],
data:function(){
return {
message:"list-message"
}
}
});
Vue.component("app",{
template:"<div class='container'>"
+" <input type='checkbox' v-selectall:parent='group1'/>select all gruop1"
+"<list :litodos='todos1'>"
+"<template slot='item' scope='props'>"+
+"<li><input type='checkbox' value='{{props.idx}}' v-selectall:child='group1'/>{{props.text}} </li>"
+"</template>"
+"</list>"
+" <hr><input type='checkbox' v-selectall:parent='group2'/>select all gruop2"
+"<list :litodos='todos2'>"
+"<template slot='item' scope='props'>"+
+"<li><input type='checkbox' value='{{props.idx}}' v-selectall:child='group2'/>{{props.text}}</li>"
+"</template>"
+"</list>"
+"</div>",
data:function(){
return {
group1:"group1",
group2:"group2",
todos1:[
{
text:'study english',
time:'3hour',
idx:'1'
},{
text:'study vue',
time:'2hour',
idx:'2'
}
],
todos2:[
{
text:'学英语',
time:'3hour',
idx:'3'
},{
text:'学js',
time:'2hour',
idx:'4'
}
]
};
}
})
var app = new Vue({
el: '#app',
data:{}
});
</script>
</html>
and here are essential fragment:
+"<list :litodos='todos1'>"
+"<template slot='item' scope='props'>"+
+"<li><input type='checkbox' value='{{props.idx}}' v-selectall:child='group1'/>{{props.text}} </li>"
+"</template>"
+"</list>"
but the result is like this:
enter image description here
I find out that the slot return to NaN,so I am so confused.Can you help me find the keys point to resolve this bug?Thank you!
I am trying to get to a point where I can have multiple component types being rendered within a single parent. It's not something which is easy to search for answers on.
I know that it is differentiating the components by adding something to the templates to distinguish them, but if I pass data as you'll see below, I get nothing, any tips?
Edit: I also don't want to have to render out these components in the HTML for this to work, needs to be passed in via JS.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="app">
<component v-for="widget in widgets" :is="widget.type"></component>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<script>
Vue.config.debug = true
Vue.component('component-a', {
template: '<p>{{foo}}</p>',
props: ['foo',]
});
Vue.component('component-b', {
template: '<p>{{bar}}</p>',
props: ['bar',]
});
new Vue({
el: "#app",
data: {
widgets: [
{
type: "component-a",
foo: 'Hello'
},
{
type: "component-b",
bar: "World",
},
]
}
});
</script>
</body>
</html>
The issue is that you're not passing any props for the foo and bar elements
<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
<div id="app">
<component v-for="widget in widgets" :is="widget.type" :foo="widget.foo" :bar="widget.bar"></component>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<script>
Vue.config.debug = true
Vue.component('component-a', {
template: '<p>{{foo}}</p>',
props: ['foo',]
});
Vue.component('component-b', {
template: '<p>{{bar}}</p>',
props: ['bar',]
});
new Vue({
el: "#app",
data: {
widgets: [
{
type: "component-a",
foo: 'Hello'
},
{
type: "component-b",
bar: "World",
},
]
}
});
</script>
</body>
</html>
jsFiddle
In your example the components are rendering with empty strings so you're not seeing the values you're trying to pass. when using interchangeable components it's often best to use a common value interface. Something along the lines of:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="app">
<component v-for="widget in widgets" :is="widget.type" :value="widget.value"></component>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<script>
Vue.config.debug = true
Vue.component('component-a', {
template: '<p>{{value.foo}}</p>',
props: ['value',]
});
Vue.component('component-b', {
template: '<p>{{value.bar}}</p>',
props: ['value',]
});
new Vue({
el: "#app",
data: {
widgets: [
{
type: "component-a",
value: {
foo: 'Hello'
}
},
{
type: "component-b",
value: {
bar: "World",
}
},
]
}
});
</script>
</body>
</html>
So that the components only pass the single value object to the component necessary and the component pulls the unique values from that object.