I am using vue-select component from Vue Select Library in my html form as shown below and I want to display three value in the label but don't know how to achieve that. i couldn't found any solution in the documentation.
I want to display three value in the label as shown below.
<v-select id="selected_item" name="selected_item" title="Select an item" :options="formfieldsdata.items" :reduce="item_name => item_name.id" label="item_name+'::'+item_code+'::'+item_created_at" v-model="item.selected_item" #input="getSelectedItem" style="width: 100%; height:56px;" />
HTML:
<script src="{{ asset('assets/requiredjs/vue-select.js') }}"></script>
<link href="{{ asset('assets/requiredcss/vue-select.css') }}" rel="stylesheet">
<v-select id="selected_item" name="selected_item" title="Select an item" :options="formfieldsdata.items" :reduce="item_name => item_name.id" label="item_name" v-model="item.selected_item" #input="getSelectedItem" style="width: 100%; height:56px;" />
JS:
Vue.component('v-select', VueSelect.VueSelect);
var app = new Vue({
el: '#app',
data: {
formfieldsdata: {
items: [],
},
item: {
selected_item: 0,
},
}
});
Ref to vue select library documentation: https://vue-select.org/guide/values.html#transforming-selections
Just use template literals, what allow embed expressions in JavaScript strings. And make the label binded :label
<v-select id="selected_item" name="selected_item" title="Select an item" :options="formfieldsdata.items" :reduce="item_name => item_name.id" :label="`${item_name} ${item_code} ${item_created_at}" v-model="item.selected_item`" #input="getSelectedItem" style="width: 100%; height:56px;" />
Update
label can use only for one object property. But you can use scopes for options and selected values. Example on codepen
<v-select id="selected_item" name="selected_item" title="Select an item" :options="formfieldsdata.items" :reduce="item_name => item_name.id" v-model="item.selected_item" #input="getSelectedItem" style="width: 100%; height:56px;" >
<template slot="option" slot-scope="option">
<span :class="option.icon"></span>
{{ option.item_name }} {{option.item_code}} {{option.created_at}}
</template>
<template slot="selected-option" slot-scope="option">
<span :class="option.icon"></span>
{{ option.item_name }} {{option.item_code}} {{option.created_at}}
</template>
</v-select>
Update 2
Multi properties search vue-select
vue-component
<div id="app">
<h1>Vue Select - Multiple properties</h1>
<v-select :options="options" label="item_data"
v-model="selected">
</v-select>
</div>
vue-code
Vue.component('v-select', VueSelect.VueSelect)
new Vue({
el: '#app',
data: {
options: [
{
title: 'Read the Docs',
icon: 'fa-book',
url: 'https://codeclimate.com/github/sagalbot/vue-select'
},
{
title: 'View on GitHub',
icon: 'fa-github',
url: 'https://codeclimate.com/github/sagalbot/vue-select'
},
{
title: 'View on NPM',
icon: 'fa-database',
url: 'https://codeclimate.com/github/sagalbot/vue-select'
},
{
title: 'View Codepen Examples',
icon: 'fa-pencil',
url: 'https://codeclimate.com/github/sagalbot/vue-select'
}
]
}
})
Related
I know how to bind a Vue application to a select with multiple attribute.
But in this particular case, I have a list of checkboxes that can be turned on or off. They are attributes of a residency to reserve.
For example, user sees a list of features of an accommodation like :
How can I bind these?
You can achieve this by using vue-multiselect library.
Demo :
new Vue({
components: {
Multiselect: window.VueMultiselect.default
},
data: {
value: [],
accommodation: [{
feature: 'Party'
},
{
feature: 'Food'
},
{
feature: 'Oven'
},
{
feature: 'AC'
}
]
},
methods: {
customLabel(option) {
return `${option.feature}`
},
isSelected(option) {
return this.value.some((op) => op.feature === option.feature)
}
}
}).$mount('#app')
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link href="https://unpkg.com/vue-multiselect#2.0.2/dist/vue-multiselect.min.css" rel="stylesheet" />
<script src="https://unpkg.com/vue-multiselect#2.0.3/dist/vue-multiselect.min.js"></script>
<div id="app">
<multiselect v-model="value" :options="accommodation" :multiple="true" track-by="feature" :custom-label="customLabel" :close-on-select="false">
<span class="checkbox-label" slot="option" slot-scope="scope">
{{ scope.option.feature }}
<input class="test" type="checkbox" :checked="isSelected(scope.option)" #focus.prevent :key="scope.option.feature" />
</span>
</multiselect>
</div>
I am currently doing a website builder, where user can drag and drop to add element.
The drag and drop works well, but what i want is, how can i disable/hide the drop placeholder in the target container ?
As show in the image, whenever I hover on a container, it will show a copy of my dragging element by default, which I don't want.
Here is my code :
<template>
<div style="display : flex;">
<div id="dragArea">
<draggable
class="dragArea list-group"
:list="list1"
:group="{ name: 'item', pull: 'clone', put: false }"
:clone="cloneItem"
#change="log"
>
<div class="list-group-item" v-for="element in list1" :key="element.id">{{ element.name }}</div>
</draggable>
</div>
<div id="dropArea">
<draggable class="dragArea list-group" :list="list2" group="item" #change="log">
<div class="list-group-item" v-for="element in list2" :key="element.id">{{ element.name }}</div>
</draggable>
</div>
</div>
</template>
Script :
<script>
import draggable from "vuedraggable";
let idGlobal = 8;
export default {
name: "custom-clone",
display: "Custom Clone",
order: 3,
components: {
draggable,
},
data() {
return {
hover : false,
list1: [
{ name: "cloned 1", id: 1 },
{ name: "cloned 2", id: 2 },
],
list2: [
]
};
},
methods: {
log: function(evt) {
window.console.log(evt);
},
cloneItem({ name, id }) {
return {
id: idGlobal++,
name: name
};
},
},
};
</script>
On each of your <draggable> components within your <template>, you can set the ghost-class prop to a CSS class that hides the drop placeholder (ie. "ghost", or "dragging element" as you called it) using display: none; or visibility: hidden;.
For example:
In your <template>:
<draggable ghost-class="hidden-ghost">
and in the <style> section of your Vue Single File Component, or in the corresponding stylesheet:
.hidden-ghost {
display: none;
}
Working Fiddle
The ghost-class prop internally sets the SortableJS ghostClass option (see all the options here). The ability to modify these SortableJS options as Vue.Draggable props is available as of Vue.Draggable v2.19.1.
I want to do two tasks using a v-select which is having dynamic items to load.
1. want to bind item-text with form to insert.
2. want to get item-id while select the option.
My code :
<v-select
:items="titles"
item-text="ocmtitle"
item-value="id"
v-model="ocmform.title"
label="Ocm Title"
#change="getOcmsubtitles()"
outline
></v-select>
You should use multi-select for v-model the element. Here is an example.
new Vue({
components: {
Multiselect: window.VueMultiselect.default
},
data: {
value: '',
options: [{
name: 'Vue.js',
language: 'JavaScript'
},
{
name: 'Rails',
language: 'Ruby'
},
{
name: 'Sinatra',
language: 'Ruby'
},
{
name: 'Laravel',
language: 'PHP',
$isDisabled: true
}
]
},
methods: {}
}).$mount('#app')
* {
font-family: 'Lato', 'Avenir', sans-serif;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<script src="https://unpkg.com/vue-multiselect#2.1.0"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-multiselect#2.1.0/dist/vue-multiselect.min.css">
<div id="app">
<multiselect v-model="value" :options="options" placeholder="Pick some" label="name" track-by="name" id="example">
</multiselect>
<pre class="language-json"><code>{{ value }}</code></pre>
</div>
I am trying to get the selected value to update in my vue component, but it doesn't change and stays empty instead, i can select things but i can't do anything with it.
I have tried adding :value to the v-select component, but it just doesn't update the value whenever i select something.
Since i am still trying this with the example from their documentation, i made a fork on codepen here: https://codepen.io/andyftp/pen/GweKpP so you can try it out.
Anyone can help me here?
HTML:
<div id="app">
<h1>Vue Select - Ajax</h1>
<v-select label="name"
:filterable="false"
:options="options"
:selected="selected"
#search="onSearch"
><template slot="no-options">
type to search GitHub repositories..
</template>
<template slot="option" slot-scope="option">
<div class="d-center">
<img :src='option.owner.avatar_url'/>
{{ option.full_name }}
</div>
</template>
<template slot="selected-option" scope="option">
<div class="selected d-center">
<img :src='option.owner.avatar_url'/>
{{ option.full_name }}
</div>
</template>
</v-select>
Selected: {{ selected }}
</div>
JS:
Vue.component("v-select", VueSelect.VueSelect);
new Vue({
el: "#app",
data: {
selected: null, // this needs to be filled with the selected value (id or object), but it stays empty
options: []
},
methods: {
onSearch(search, loading) {
loading(true);
this.search(loading, search, this);
},
search: _.debounce((loading, search, vm) => {
fetch(
`https://api.github.com/search/repositories?q=${escape(search)}`
).then(res => {
res.json().then(json => (vm.options = json.items));
loading(false);
});
}, 350)
}
});
I am creating a demo of todolist app and I want to strike-through the list on click of list or selecting particular checkbox. Here is my code:
<div v-for="(item, index) in toDoList" :key="index">
<v-checkbox v-model="item.status"></v-checkbox>
<textfield>{{item.title}}</textfield>
</div>
where status is having a boolean value.
If you want your <textfield> to be responding to click events, a small change to your markup is required:
<v-checkbox
:label="item.title"
v-model="item.status"
></v-checkbox>
And then you can add this additional style to your stylesheet to target the <label> element of a checked checkbox:
.input-group--active label {
text-decoration: line-through;
}
new Vue({
el: '#app',
data: {
toDoList: [
{ title: 'Lorem', status: null },
{ title: 'ipsum', status: null },
{ title: 'dolor', status: null },
{ title: 'sit', status: null },
{ title: 'amet', status: null }
]
}
});
.input-group--active label {
text-decoration: line-through;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<!-- Vuetify dependencies -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.0.14/vuetify.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.0.14/vuetify.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
<div id="app">
<div
v-for="(item, index) in toDoList"
:key="index">
<v-checkbox
:label="item.title"
v-model="item.status"
></v-checkbox>
</div>
</div>
An alternative solution is simply adding a custom class to your checked elements using :class binding, e.g.:
<div
v-for="(item, index) in toDoList"
:key="index"
:bind="{ 'is-selected': item.status' }">
And for your CSS:
.is-selected label {
text-decoration: line-through;
}
Note that since text-decoration is not inheritable, using .is-selected { text-decoration: line-through; } will not work. You will have to select for the descendant <label> element.
new Vue({
el: '#app',
data: {
toDoList: [
{ title: 'Lorem', status: null },
{ title: 'ipsum', status: null },
{ title: 'dolor', status: null },
{ title: 'sit', status: null },
{ title: 'amet', status: null }
]
}
});
.is-selected label {
text-decoration: line-through;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<!-- Vuetify dependencies -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.0.14/vuetify.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.0.14/vuetify.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
<div id="app">
<div
v-for="(item, index) in toDoList"
:key="index"
:class="{ 'is-selected': item.status }">
<v-checkbox
:label="item.title"
v-model="item.status"
></v-checkbox>
</div>
</div>