<!DOCTYPE html>
<html>
<!--
WARNING! Make sure that you match all Quasar related
tags to the same version! (Below it's "@1.12.8")
http://www.quasarchs.com/start/pick-quasar-flavour
-->
<head>
<!--
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
-->
<link href="https://cdn.jsdelivr.net/npm/quasar@1.12.5/dist/quasar.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="q-app">
<div class="q-ma-md">
<q-select
filled
v-model="model"
use-input
use-chips
hide-hint
input-debounce="0"
@new-value="createValue"
:options="filterOptions"
@filter="filterFn"
style="width:300px;">
</q-select>
</div>
</div>
<!-- Add the following at the end of your body tag -->
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.8/dist/quasar.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.8/dist/icon-set/svg-material-icons.umd.min.js"></script>
<script>
Quasar.iconSet.set(Quasar.iconSet.svgMaterialIcons)
stringOptions = [
'Google', 'Facebook', 'Twitter', 'Apple', 'Oracle'
]
/*
Example kicking off the UI. Obviously, adapt this to your specific needs.
Assumes you have a <div id="q-app"></div> in your <body> above
*/
var vm = new Vue({
el: '#q-app',
data: function () {
return {
model: null,
filterOptions: stringOptions
}
},
//监听属性的变化
watch: {
model: function (val) {
console.log("val")
},
},
methods: {
createValue (val, done) {
// Calling done(var) when new-value-mode is not set or "add", or done(var, "add") adds "var" content to the model
// and it resets the input textbox to empty string
// ----
// Calling done(var) when new-value-mode is "add-unique", or done(var, "add-unique") adds "var" content to the model
// only if is not already set
// and it resets the input textbox to empty string
// ----
// Calling done(var) when new-value-mode is "toggle", or done(var, "toggle") toggles the model with "var" content
// (adds to model if not already in the model, removes from model if already has it)
// and it resets the input textbox to empty string
// ----
// If "var" content is undefined/null, then it doesn't tampers with the model
// and only resets the input textbox to empty string
if (val.length > 0) {
if (!stringOptions.includes(val)) {
stringOptions.push(val)
}
done(val, 'toggle')
}
},
filterFn (val, update) {
update(() => {
if (val === '') {
this.filterOptions = stringOptions
} else {
const needle = val.toLowerCase()
this.filterOptions = stringOptions.filter(
v => v.toLowerCase().indexOf(needle) > -1
)
}
})
},
}
})
</script>
</body>
</html>
