Skip to content

Instantly share code, notes, and snippets.

@joemsak

joemsak/1_layout.html.erb

Last active Mar 20, 2018
Embed
What would you like to do?
v-select in rails 5.1 webpacker vue
<!DOCTYPE html>
<html>
<head>
<!-- other HEAD stuff omitted -->
<%= stylesheet_link_tag("//fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons") %>
<%= yield :css %>
<%= yield :js %>
</head>
<body>
<%= yield %>
</body>
</html>
<% provide :title, "Admin Data • Participants" %>
<% provide :js, javascript_pack_tag("admin") %>
<% provide :css, stylesheet_pack_tag("admin") %>
<div class="panel">
<div id="app">
<v-app>
<v-container>
<!-- other filters -->
<season-filter></season-filter>
</v-container>
</v-app>
</div>
</div>
<!-- results from searching with filters -->
import TurbolinksAdapter from 'vue-turbolinks';
import Vue from 'vue/dist/vue.esm';
import Vuex from 'vuex'
import Vuetify from 'vuetify'
import _ from 'lodash'
Vue.use(Vuex)
Vue.use(Vuetify)
import VTooltip from 'v-tooltip';
import SeasonFilter from '../admin/SeasonFilter'
import "../components/tooltip.scss";
Vue.use(TurbolinksAdapter);
Vue.use(VTooltip);
import 'vuetify/dist/vuetify.min.css'
import '../admin/main.scss'
const store = new Vuex.Store({
state: {
searchFilters: {
seasons: // filter values and properties...,
},
},
getters: {
searchFilters: (state) => (opts) => {
// return filter from opts...
}
},
mutations: {
searchFilters (state, opts) {
// remote ajax with filters
},
},
})
document.addEventListener('DOMContentLoaded', () => {
new Vue({
el: "#app",
store,
computed: {
},
components: {
SeasonFilter,
},
mounted () {
console.log('admin participants')
},
});
});
<template>
<div>
<v-subheader>Seasons</v-subheader>
<v-select
label="Select"
:items="seasons"
v-model="selected"
multiple
chips
deletable-chips
hint="Choose seasons"
persistent-hint
></v-select>
</div>
</template>
<script>
export default {
name: 'SeasonFilter',
data () {
return {
seasons: this.$store.getters.searchFilters({
name: 'seasons',
}),
selected: this.$store.getters.searchFilters({
name: 'selectedSeasons',
}),
}
},
watch: {
selected (collection) {
this.$store.commit('searchFilters', {
filterRoot: 'seasons',
value: collection
})
},
},
props: [],
components: {
},
methods: {
},
mounted () {
console.log('season filter')
},
}
</script>
@joemsak

This comment has been minimized.

Copy link
Owner Author

@joemsak joemsak commented Mar 20, 2018

Chrome Dev Tools inspecting the checkboxes in Codepen
screen shot 2018-03-20 at 12 42 38 pm

@joemsak

This comment has been minimized.

Copy link
Owner Author

@joemsak joemsak commented Mar 20, 2018

Chrome dev tools inspecting the checkbox in my rails app
screen shot 2018-03-20 at 12 45 58 pm

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment