I have this kind of objects in an array:
{
name: 'name1',
url: 'http://url-1.tld'
},
{
name: 'name2',
url: 'http://url-2.tld'
}
On div click, I want to to a window.location.href to the url, but I can't seem to get the url from the data to my method.
<div v-for="person in persons" v-on:click="select($event)"></div>
select: function(event) {
window.location.href( ??? )
}
Anybody have suggestions?
You need to pass the person as the argument to select, not $event:
<div v-for="person in persons" v-on:click="select(person)"></div>
select: function(person) {
window.location.href = person.url;
}
Related
I have a table in Vue.js application, listing a URL and an Id. This URL is defined by the user, so I created and input component, with a input text, using the URL as value and the Id as parameter. The v-model of this component is an array, where I need to store data as JSON objects like this:
{
"id": 1,
"url": "www.some-url.com"
}
How can I catch changes in the url field and return for its parent to append in an array?
Component:
<template>
<div class="row">
<div class="col-md-12">
<input type="text"
class="form-control"
v-model="value.url">
</div>
</div>
</template>
<script>
export default {
name: 'inputUrl',
props: {
url: {
type: [String],
description: 'URL'
},
id: {
type: Number,
description: 'Id'
}
},
components: {
}
data() {
return {
value: {
id: this.id,
url: this.default
}
};
},
methods: {
},
mounted() {
},
watch: {
}
}
</script>
Usage:
<inputUrl
:id="1"
url="www.some-url.com"
v-model="array">
</inputUrl>
I passed the array variable to the InputUrl component then used v-on directive to passing the current input value to a custom function for appending the new values to the array variable.
Here an example.
I have the following form:
This is the edit form.
As you can see I have a multiple select. I need to bind the values from the server to the select.
Here is structure of my objects from the server.
1) All elements for the multiple select:
2) Particular objects, that I want to see selected. As you can see, there's an additional field called 'pivot'.
As a result, I would like to see the following when I open my form:
I have tried something like this, but without success:
<div class="form-group">
<label for="bk">Связанные бк</label>
<select class="form-control form-control-sm" id="bk" v-model="formFields.applicationBk" multiple>
<option v-for="bk in allBk" v-if="applicationBk.find(x => x.id === bk.id) 'selected'" >
{{ bk.name }}
</option>
</select>
Here is full js code:
<script>
import { EventBus } from '../../app';
export default {
name: "ApplicationEdit",
props: ['applicationId', 'name', 'offer', 'bundleId', 'isBlackMode', 'applicationBk', 'allBk'],
mounted: function(){
console.log(this.applicationBk)
},
methods:{
submit: function (e) {
window.axios.post('/application/edit/' + this.applicationId, this.formFields)
.then(res => {
console.log('Сохранил!');
$('#applicationEdit' + this.applicationId).modal('hide');
EventBus.$emit('reloadApplicationsTable');
}).catch(err => {
if(err.response.status === 422){
this.errors = err.response.data.errors || [];
}
//console.error('Ошибка сохранения приложения. Описание: ');
console.error(err)
});
}
},
data(){
return {
formFields: {
applicationId: this.applicationId,
applicationBk: this.applicationBk,
name: this.name,
offer: this.offer,
bundle_id: this.bundleId,
giraffe: this.isBlackMode,
bk: this.applicationBk,
},
errors: []
}
}
}
You might consider using your loop as you have but using v-model to an array of the selected values. Here is vue's example of this: https://v2.vuejs.org/v2/guide/forms.html#Select
I need to use filter "capitalize" in vue js 2, but when I add filters according to documentation, it gave me error.
my code
<template>
<div class="test">
<h1>{{title}}</h1>
<ul>
<li v-for="item in items | capitalize" :key="item.first">{{item.first}},{{item.last}}</li>
</ul>
</div>
</template>
<script>
export default {
name: 'test',
vinput: '',
data () {
return {
title: 'Hello,
items: [
{
first: 'John0',
last: 'Doe'
},
{
first: 'Pavel',
last: 'Doe'
},
{
first: 'Shox',
last: 'Doe'
}
]
}
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
}
</script>
error
enter image description here
Any ideas, how to corrext that error?
Use filters in the template syntax.
<li v-for="item in items" :key="item.first">{{item.first | capitalize}},{{item.last | capitalize}}</li>
First, we have to define in main.js as shown below.
Vue.filter('UpperCase', function(val) {
return val.toUpperCase()
})
Then, we have to use where we need as shown below.
<div>{{ name | UpperCase }}</div>
Whatever function you want, just write function and call it.
I have this kind of objects in an array:
{
name: 'name1',
url: 'http://url-1.tld'
},
{
name: 'name2',
url: 'http://url-2.tld'
}
On div click, I want to to a window.location.href to the url, but I can't seem to get the url from the data to my method.
<div v-for="person in persons" v-on:click="select($event)"></div>
select: function(event) {
window.location.href( ??? )
}
Anybody have suggestions?
You need to pass the person as the argument to select, not $event:
<div v-for="person in persons" v-on:click="select(person)"></div>
select: function(person) {
window.location.href = person.url;
}
I'm wanted to force the running of a filter on a component everytime it's used. I know I can add a filter to a component in it's markup, but in this instance the filter is to be considered "required", or "core" functionality of the component.
For example, the below component and filter can be used like: <my-component v-model="amount | custom-currency" name="my-field"></my-component>
What I'm ultimately wanting to achieve is the same behavior, but with the markup only looking like: <my-component v-model="amount" name="my-field"></my-component>
The examples are based on the currency filter example outlined here: http://vuejs.org/guide/custom-filter.html#Two-way_Filters
Any help or suggestions greatly appreciated
Component and filter for reference:
var CurrencyComponent = Vue.extend({
props: {
name: {
type: String,
required: true
}
},
filter: 'customCurrency',
template: '<input type="text" name="{{ name }}" >'
});
Vue.filter('customCurrency', {
read: function(val, symbol) {
if (typeof val !== 'undefined') {
return symbol + val.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
return symbol + '0';
},
write: function(val, oldVal) {
var number = +val.replace(/[^\d.]/g, '');
return isNaN(number) ? 0 : parseFloat(number.toFixed(2))
}
});
EDIT:
In reference to Dewey's answer:
var CurrencyComponent = Vue.extend({
props: {
name: {
type: String,
required: true
}
},
computed: {
'hehe2': function() {
return this.$eval('hehe | custom-currency');
}
},
template: '<input type="text" name="{{ name }}" >'
});
You can use computed properties.
Make 2 variables: one variable as input, and the other as the filtered input. Something like:
HTML:
<div id="app">
<input v-model="asInput" />
<h1>{{ asOutput }}</h1>
</div>
JS:
new Vue({
el: '#app',
data: {
asInput: ''
},
computed: {
'asOutput': function() {
return this.$eval('asInput | yourCustomFilter');
}
}
});
See the working example here: https://jsfiddle.net/7ae9t9wv/
Hope this helps