I am not sure if I am terming this correctly. I have a very simple vuejs application (I just started learning vue a couple of days ago, so my knowledge of vue is really limited).
I have a input field which acts as a search box. When we feed some text input, it triggers v-on:blur event to call a function. It then sets the suggestions which are displayed just below the searchbox.
What I am trying to achieve is, when any of those anchor tags are clicked (from the search suggestions), two new input boxes should be automatically populated with the values from the search suggestions.
{name: 'Some Name', state: 'Some State'}
A very simple and stripped version of the code is as https://jsfiddle.net/dfhpj08g/
new Vue({
el: "#app",
data: {
suggestions: [],
showSuggestions: false,
},
methods: {
suggest() {
// this is dynamically generated via ajax
this.suggestions = [{
name: 'A',
state: 'OH'
},
{
name: 'B',
state: 'OR'
},
];
this.showSuggestions = true;
}
}
})
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
li {
margin: 8px 0;
}
h2 {
font-weight: bold;
margin-bottom: 15px;
}
del {
color: rgba(0, 0, 0, 0.3);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input type="text" v-on:blur="suggest" placeholder="search">
<div v-show="showSuggestions">
<span>Did you mean</span>
<li v-for="s in suggestions">
<a href="#">
{{s.name}} - ({{s.state}})
</a>
</li>
</div>
<input type="text" name="name" placeholder="name">
<input type="text" name="state" placeholder="state">
</div>
If you want to insert the values into your name and state fields, I would suggest using v-model on them and declaring the corresponding data in your component. In that way, you can simply set them using this.name and this.state:
data: {
suggestions: [],
showSuggestions: false,
name: '',
state: ''
},
Use v-model to bind name and state data to your input elements:
<input type="text" name="name" placeholder="name" v-model="name">
<input type="text" name="state" placeholder="state" v-model="state">
You can bind a click handler to each of the <a> elements, so that you will can pass the index of the clicked suggestion. This will allow you to do this.suggestion[i] to retrieve the data:
<li v-for="(s, i) in suggestions" v-bind:key="i">
<a href="#" v-on:click.prevent="suggestionSelected(i)">
{{s.name}} - ({{s.state}})
</a>
</li>
Then, in your methods, you can create a new function suggestionSelected, which accepts the index of the suggestion as i. In that way, you can use the bracket syntax to access the selected suggestion:
suggestionSelected(i) {
this.name = this.suggestions[i].name;
this.state = this.suggestions[i].state;
}
See proof-of-concept example below:
new Vue({
el: "#app",
data: {
suggestions: [],
showSuggestions: false,
name: '',
state: ''
},
methods: {
suggest() {
// this is dynamically generated via ajax
this.suggestions = [{
name: 'A',
state: 'OH'
},
{
name: 'B',
state: 'OR'
},
];
this.showSuggestions = true;
},
suggestionSelected(i) {
this.name = this.suggestions[i].name;
this.state = this.suggestions[i].state;
}
}
})
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
li {
margin: 8px 0;
}
h2 {
font-weight: bold;
margin-bottom: 15px;
}
del {
color: rgba(0, 0, 0, 0.3);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input type="text" v-on:blur="suggest" placeholder="search">
<div v-show="showSuggestions">
<span>Did you mean</span>
<li v-for="(s, i) in suggestions" v-bind:key="i">
<a href="#" v-on:click.prevent="suggestionSelected(i)">
{{s.name}} - ({{s.state}})
</a>
</li>
</div>
<input type="text" name="name" placeholder="name" v-model="name">
<input type="text" name="state" placeholder="state" v-model="state">
</div>
Related
Is there's any way to bind multiple checkboxes from many children to one parent (f.e. via model)?
Let's say that the child component has something like:
<input
type="checkbox"
:id="'ticket-'+id"
:checked="checked"
/>
Now, is it possible to have a parent prop like selected that would collect the id as values in an array of all checked checkboxes from children?
{
selected: [
5,
8
]
}
The nearest thing to my solution in mind is this. But in my case, I don't want to keep track of unchecked instances.
You can listen to the checkbox change events on the parent and call a method which updates the data model.
Check out the fiddle below demonstrating this. (Go full page to see it properly)
new Vue({
el: "#app",
data: {
list: [
{ id: 1, label: 'Check 1'},
{ id: 2, label: 'Check 2'},
{ id: 3, label: 'Check 3'},
{ id: 4, label: 'Check 4'},
],
selected: []
},
methods: {
handleChange: function(ev) {
let id = ev.target.id;
if (ev.target.checked) {
if (!this.selected.includes(id)) {
this.selected.push(id);
}
} else {
this.selected = this.selected.filter(function (item) {
return item !== id;
});
}
console.log('Updated: ', this.selected);
}
}
})
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
li {
margin: 8px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<ol #change="handleChange">
<li v-for="check in list">
<label>
<input type="checkbox" :id="check.id" />
<span>{{check.label}}</span>
</label>
</li>
</ol>
</div>
I am trying to apply the ternary operator in the v-model but it's not working. I also read a lot of similar questions and answers on StackOverflow but none answer my query.
I have created a data variable testCondition which is set to false by default. Using this condition testCondition?name:place, place is returned in v-model if testCondition is false but if testCondition is true then v-model does not return anything.
Here is my code:
new Vue({
el: "#app",
data: {
name: '',
place: '',
testCondition: false,
},
})
body {
padding: 15px;
}
input {
border-radius: 3px;
padding: 5px;
border: thin solid lightgrey;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<br>
<input type="text" v-model="testCondition?name:place">
<br><br> Test condition status: {{testCondition}}
<br> Name: {{name}}
<br> Place: {{place}}
</div>
Expected result: If I change the value of testCondition from false to true, output should be shown in {{name}}
Actual result: Only working for {{place}} if testCondition is set to false
Try this: <input type="text" v-model="$data[testCondition ? 'name' : 'place']">
new Vue({
el: "#app",
data: {
name: '',
place: '',
testCondition: false,
},
})
body {
padding: 15px;
}
input {
border-radius: 3px;
padding: 5px;
border: thin solid lightgrey;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<br>
<input type="text" v-model="$data[testCondition ? 'name' : 'place']">
<br><br> Test condition status: {{testCondition}}
<br> Name: {{name}}
<br> Place: {{place}}
</div>
You need a computed property with a getter and a setter: https://v2.vuejs.org/v2/guide/computed.html#Computed-Setter
computed: {
myModel: {
get() {
return this.testCondition ? this.name : this.place;
}
set(newValue) {
this.doSomethingWith(newValue);
}
}
// then in template: v-model="myModel"
If I do this on vue:
<input pattern="\d+">
It gets properly validated, but I get a popup with a message "Please match the requested format".
Is there any way to change this message? I can't find the documentation on the accepted validation tags.
JSFiddle: http://jsfiddle.net/ovz5p3wt/
so, as noted in comments, the way to do it is to use oninvalid and setCustomValidity
<input pattern="\d+" oninvalid="setCustomValidity('please use a number')">
However, if you want to do it using a script (since you are tagging at as vue) here is another solution that allows you to dynamically change the value you can use the script version. unfortunately #oninvalid doesn't seem to be supported by vue, so you'd need to set the functionality using $refs
updateCustomValidity(lang){
var el = this.$refs.el;
el.oninvalid = el.setCustomValidity(this[lang].message);
}
new Vue({
el: "#app",
data() {
return {
lang: 'en',
en: {
message: 'nope, sorry',
},
fr: {
message: 'sacre bleu'
}
}
},
watch: {
lang: {
handler(lang) {
this.updateCustomValidity(lang);
}
}
},
methods: {
updateCustomValidity(lang){
var el = this.$refs.el;
el.oninvalid = el.setCustomValidity(this[lang].message);
}
},
mounted() {
this.updateCustomValidity(this.lang);
}
})
body { background: #20262E; padding: 20px; font-family: Helvetica;}
#app { background: #fff; border-radius: 4px; padding: 20px; transition: all 0.2s;}
input { margin: 8px 0;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
EN: <input type="radio" v-model="lang" value="en">
FR: <input type="radio" v-model="lang" value="fr">
<form>
<input pattern="\d+" value="text" ref="el">
<button type="submit">Submit</button>
</form>
</div>
I want delete item from array but there are the same item and js delete last one !
let app = new Vue({
el: '#app',
data: {
items: []
},
methods: {
addItem() {
this.items.push('');
},
removeItem(index) {
this.items.splice(index, 1);
}
}
});
<script src="https://unpkg.com/vue#2.1.10/dist/vue.js"></script>
<div id="app">
<ul class="list-group">
<li class="list-group-item" v-for="(item , index) in items">
remove
<input name="form[]" type='file'>
</li>
</ul>
<button #click='addItem'>new item</button>
</div>
JSFiddle: https://jsfiddle.net/6hvbqju2/
Vue uses an "in-place patch strategy" when dealing with list of elements. This strategy is not suitable when relying on form input values.
When using v-for directive it is better to define a v-bind:key to give Vue a hint to track each node.
We'll store numbers in the items array and use them as a key. In your case you should use an item's property that can serve as a unique key.
let app = new Vue({
el: '#app',
data: {
counter: 0,
items: []
},
methods: {
addItem() {
this.items.push(this.counter++);
},
removeItem(index) {
this.items.splice(index, 1);
}
}
});
<script src="https://unpkg.com/vue#2.1.10/dist/vue.js"></script>
<div id="app">
<ul class="list-group">
<li class="list-group-item" v-for="(item , index) in items" :key="item">
remove
<input name="form[]" type='file'>
</li>
</ul>
<button #click='addItem'>new item</button>
</div>
Your codes working fine but,
This is because of file input auto complete behaviour
See this example
let app = new Vue({
el : '#app',
data : {
items: [],
},
methods : {
addItem() {
this.items.push({file: null});
console.log(this.items)
},
removeItem(index) {
this.items.splice(index,1);
},
handleChange(item, event){
item.file = event.target.files["0"];
}
}
});
.upload-btn-wrapper {
position: relative;
overflow: hidden;
display: inline-block;
vertical-align: middle;
}
.btn {
border: 1px solid gray;
color: gray;
background-color: white;
padding: 4px 10px;
border-radius: 4px;
font-size: 15px;
font-weight: bold;
}
.upload-btn-wrapper input[type=file] {
font-size: 100px;
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
<script src="https://unpkg.com/vue#2.1.10/dist/vue.js"></script>
<div id="app">
<ul class="list-group">
<li class="list-group-item" v-for="(item , index) in items">
remove
<div type="button" class="upload-btn-wrapper">
<button class="btn">{{ item.file ? item.file.name : 'Choose File' }}</button>
<input name="form[]" type="file" #change="handleChange(item, $event)">
</div>
</li>
</ul>
<button #click='addItem'>new item</button>
</div>
I have several elements that are displayed as <li> elements in a loop. For each element I want behavior such that when the element is clicked a modal box opens up. Inside the modal box I want contents that are specific to the element that was clicked.
The data below shows all the elements:
{value: 10, name: "foo"},
{value: 12, name: "bar"},
{value: 14, name: "foobar"},
{value: 22, name: "test"},
{value: 1, name: "testtooo"},
{value: 8, name: "something"}
When I click on an element, I want to see the value property for it inside the modal box.
I've created a fiddle for this: https://jsfiddle.net/hvb9hvog/14/
Question
I've gotten the modal working, however, how can I show each elements value property inside the modal?
I am sure there are multiple ways to go about this, but one way would be to create a new data property, let's call it value. When you #click the li you get it's value, set it to the value property and display that value property in the body of the modal ({{this.value}}).
You can have two #click methods, so create another one that updates the data property you just created, called value.
Here's a fiddle
Relevant code changes:
In your li element:
<li v-for="request in filteredRequests">
{{request.name}}
</li>
In your modal markup:
<modal v-if="showModal" #close="showModal = false">
<!--
you can use custom content here to overwrite
default content
-->
<h3 slot="header">custom header</h3>
<div slot="body">
{{this.value}}
</div>
</modal>
In vue data:
data: {
requests: [
{value: 10, name: "foo"},
{value: 12, name: "bar"},
{value: 14, name: "foobar"},
{value: 22, name: "test"},
{value: 1, name: "testtooo"},
{value: 8, name: "something"}
],
num: 0,
showModal: false,
value: 9999999999
},
In vue methods:
methods: {
setVal(val) {
this.value = val;
}
},
Vue.component('modal', {
template: '#modal-template'
})
var vm = new Vue({
el: "#app",
data: {
requests: [{
value: 10,
name: "foo"
},
{
value: 12,
name: "bar"
},
{
value: 14,
name: "foobar"
},
{
value: 22,
name: "test"
},
{
value: 1,
name: "testtooo"
},
{
value: 8,
name: "something"
}
],
num: 0,
showModal: false,
value: 9999999999
},
methods: {
setVal(val) {
this.value = val;
}
},
computed: {
c: function() {
return `Slider Number: (${this.num})`
},
filteredRequests() {
return this.requests.filter(r => r.value > this.num)
}
},
});
.modal-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
display: table;
transition: opacity .3s ease;
}
.modal-wrapper {
display: table-cell;
vertical-align: middle;
}
.modal-container {
width: 300px;
margin: 0px auto;
padding: 20px 30px;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
transition: all .3s ease;
font-family: Helvetica, Arial, sans-serif;
}
.modal-header h3 {
margin-top: 0;
color: #42b983;
}
.modal-body {
margin: 20px 0;
}
.modal-default-button {
float: right;
}
/*
* The following styles are auto-applied to elements with
* transition="modal" when their visibility is toggled
* by Vue.js.
*
* You can easily play with the modal transition by editing
* these styles.
*/
.modal-enter {
opacity: 0;
}
.modal-leave-active {
opacity: 0;
}
.modal-enter .modal-container,
.modal-leave-active .modal-container {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://unpkg.com/vue#2.3.4/dist/vue.js"></script>
<script type="text/x-template" id="modal-template">
<transition name="modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header">
default header
</slot>
</div>
<div class="modal-body">
<slot name="body">
default body
</slot>
</div>
<div class="modal-footer">
<slot name="footer">
default footer
<button class="modal-default-button" #click="$emit('close')">
OK
</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</script>
<div id="app">
<div class="form-horizontal">
<div class="form-group">
<label class="col-md-2 control-label">色</label>
<div class="col-md-10">
<input class="form-control" v-model="c" :style="{backgroundColor: c}" />
<div class="help-block">
<input type="range" min="0" max="360" v-model.number="num" />
<ul class="ml-thumbs">
<li v-for="request in filteredRequests">
{{request.name}}
</li>
</ul>
<modal v-if="showModal" #close="showModal = false">
<!--
you can use custom content here to overwrite
default content
-->
<h3 slot="header">custom header</h3>
<div slot="body">
{{this.value}}
</div>
</modal>
</div>
</div>
</div>
</div>
</div>
Add "req" property to data
data() {
return {
...
req: {},
...
}
}
set click event:
{{request.name}}
add body slot
...
<h3 slot="header">custom header</h3>
<div slot="body">
{{req.value}}
</div>
...
https://jsfiddle.net/w4e6hr86/
I'm not sure if you are asking this using Vue.js or just JS. So, here are my answers (basic examples). I recommend you to read about event delegation + events on vuejs.
Vue Js
<template>
<div class="content">
<ul>
<li v-for="item in items" #click.prevent="showModal(item)">{{ item }}</li>
</ul>
<div class="modal" v-show="isModalVisible">
{{ JSON.stringify(selectedItem) }}
close modal
</div>
</div>
</template>
<script>
export default {
name: 'something',
data () {
return {
selectedItem: item,
items: [{
id: 1,
name: 'something'
}, {
id: 2,
name: 'something #2'
}]
}
},
computed: {
isModalVisible () {
return this.selectedItem !== null
}
}
methods: {
showModal (item) {
this.selectedItem = item
}
}
}
</script>
Plain javascript
const toggleModal = content => {
const $body = document.querySelector('body')
const $modal = $body.querySelector('.modal')
$modal && $modal.remove()
$body.insertAdjacentHTML('beforeend',`<div class="modal">${content}</div>`)
}
document.querySelector('ul').addEventListener('click', e => {
if (! e.target.matches('li')) {
return
}
toggleModal(e.target.innerText)
});
About Event delegation.
About insertAdjacentHtml.
About Vuejs Event handling