// <template>
// <section>
// <h2 class="page-header" id="install">Install & and Usage</h2>
// <div class="row row-col-vh">
// <div class="col-md-7">
// <install-snippet></install-snippet>
// </div>
//
// <div class="col-md-5">
// <p>The resulting vue-select, and it's value: <v-code lang="json">{{ install | json }}</v-code></p>
// <v-select :value.sync="install" :options="['foo','bar','baz']"></v-select>
// </div>
// </div>
//
// <h2 class="page-header" id="examples">Examples</h2>
//
// <h3 class="page-header">Single/Multiple Selection</h3>
// <div class="row">
// <div class="col-md-6">
// <h4>Single Option Select</h4>
// <pre><v-code lang="markup"><v-select :options="countries"></v-select></v-code></pre>
// <v-select :options="countries"></v-select>
// </div>
//
// <div class="col-md-6">
// <h4>Multiple Option Select</h4>
// <pre><v-code lang="markup"><v-select multiple :options="countries"></v-select></v-code></pre>
// <v-select multiple :options="countries"></v-select>
// </div>
// </div>
//
// <h3 class="page-header">Reactive Options</h3>
//
// <div class="row">
// <div class="col-md-6">
// <p>When the list of options provided by the parent changes, vue-select will react as you'd expect.</p>
// <div style="margin-top:0;" class="radio">
// <label>
// <input type="radio" name="reactive-options" v-model="reactive" :value="countries">
// <v-code lang="markup"><v-select :options="countries"></v-select></v-code>
// </label>
// </div>
//
// <div class="radio">
// <label>
// <input type="radio" name="reactive-options" v-model="reactive" :value="['foo','bar','baz']">
// <v-code lang="markup"><v-select options="['foo','bar','baz']"></v-select></v-code>
// </label>
// </div>
// </div>
//
// <div class="col-md-6">
// <v-select :options="reactive"></v-select>
// </div>
// </div>
//
// <h3 class="page-header">Two-Way Value Syncing</h3>
// <div class="row">
// <div class="col-md-6">
// <p>The most common use case for vue-select is being able to sync the components value with a parent component. The <code>value</code> property supports two-way data binding to accomplish this.</p>
// <p>The <code>.sync</code> data-binding modifier is completely optional. You may use <code>value</code> without a two-way binding to preselect options.</p>
// <p>Here we have preselected 'Canada' by setting <code>syncedVal: 'Canada'</code> on the parent component. The buttons below demonstrate how you can set the <code>value</code> from the parent.</p>
//
// <p>Current value: <v-code>{{ syncedVal | json }}</v-code></p>
// </div>
//
// <div class="col-md-6">
// <div class="form-group">
// <pre><v-code lang="markup"><v-select :value.sync="syncedVal" :options="countries"></v-select></v-code></pre>
// </div>
// <div class="form-group">
// <v-select :options="simple" :value.sync="syncedVal"></v-select>
// </div>
//
// <div class="form-group">
// <button @click="syncedVal = 'United States'" class="btn btn-default">Set to United States</button>
// <button @click="syncedVal = 'Canada'" class="btn btn-default">Set to Canada</button>
// </div>
// </div>
// </div>
//
// <h3 class="page-header">Custom Labels</h3>
// <div class="row">
// <div class="col-md-6">
// <p>By default when the <code>options</code> array contains objects, <code>vue-select</code> looks for the <code>label</code> key for display. If your data source doesn't contain that key, you can set your own using the <code>label</code> prop.</p>
// <p>On this page, the list of countries used in the examples contains <code>value</code> and <code>label</code> properties: <v-code lang="json">{value: "CA", label: "Canada"}</v-code>. In this example, we'll display the country code instead of the label.</p>
// </div>
//
// <div class="col-md-6">
// <pre><v-code lang="markup"><v-select label="value" :options="countries"></v-select></v-code></pre>
// <v-select :options="countries" label="value"></v-select>
// </div>
// </div>
//
// <h3 class="page-header">On-Change Callback <small>Vuex Compatibility</small></h3>
// <div class="row">
// <div class="col-md-6">
// <p>vue-select provides an <code>onChange</code> property that accepts a callback function. This function is passed the currently selected value(s) as it's only parameter.</p>
// <p>This is very useful when integrating with Vuex, as it will allow your to trigger an action to update your vuex state object. Choose a callback and see it in action.</p>
//
// <div class="form-inline">
// <div class="radio">
// <label>
// <input type="radio" v-model="callback" value="console"> <code>console.log(val)</code>
// </label>
// </div>
//
// <div class="radio">
// <label>
// <input type="radio" v-model="callback" value="alert"> <code>alert(val)</code>
// </label>
// </div>
// </div>
// </div>
//
// <div class="col-md-6">
// <pre><v-code lang="markup"><v-select on-change="consoleCallback" :options="countries"></v-select></v-code></pre>
// <pre><v-code lang="javascript">methods: {
// consoleCallback(val) {
// console.dir(JSON.stringify(val))
// },
//
// alertCallback(val) {
// alert(JSON.stringify(val))
// }
// }</v-code></pre>
// <v-select :options="countries" :on-change="getCallback"></v-select>
// </div>
// </div>
// </section>
// </template>
//
// <style type="scss">
//
// </style>
//
// <script>
import countries from '../countries/advanced'
import simple from '../countries/simple'
import vSelect from './Select.vue'
import vCode from './Code.vue'
import InstallSnippet from './snippets/InstallSnippet.vue'
export default {
components: {vSelect,vCode,InstallSnippet},
data () {
return {
countries,
simple,
callback: 'console',
reactive: null,
install: null,
syncedVal: 'Canada'
}
},
methods: {
consoleCallback(val) {
console.dir(JSON.stringify(val))
},
alertCallback(val) {
alert(JSON.stringify(val))
}
},
computed: {
getCallback() {
if( this.callback === 'alert' ) {
return this.alertCallback
}
return this.consoleCallback
}
}
}
// </script>
/* generated by vue-loader */
|