v-select about discussion

[yyx990803]

This indeed looks like a cleaner solution! I've seen a lot of people creating <option> lists with v-repeat, which I agree doesn't look that nice.

One thing I'm not so sure about is overwriting vm[dir.key] with the selected value - once the original object has been replaced, you can no longer vm.$watch it. Maybe vm[dir.key] can be an object:

{
  options: [ /* key-value pair objects */ ],
  value: '' // can be used to set the default value
}

[gaydenko]

To tell the truth, I don't understand any reason to $watch config object (last one is just used during bind only). Array of { label, value } has own dedicated key and can be (and is) $watched.

Technically - yes, of course, we can add placeholder as you have shown valie: ''.

As for default value, well, I have met a situation I can get options array after rendering (binding) only, so at vm instantiation the array is empty (default value hasn't any sense), and then, being $watched, is filled after processing an AJAX request.

I guess both way are acceptable.

[gaydenko]

I have got another consideration. Say, we have v-select='flt.discount'. Here flt is a grouping object used as data for further AJAX request. At case with dedicated target object placeholder we get two problems:

• target object is moved one level deeper - it is discount.value in AJAX request data rather just discount
• we pollute unneeded data to request, that is all other model objects with flt.discount key path prefix.

So, I guess, at the form processing case we are forced to think both about clean markup and, also, about clean model :)

[thelinuxlich]

+1

[jackdempsey]

Why was this closed @gaydenko? I'm curious about the resolution moving forward. For a use case of mine, trying to set a selected option via something like this:

%option(v-repeat="[10,9,8,7,6,5,4,3,2,1]" selected="{{ $value == orderItem.qty }}") {{ $value }}

simply doesn't work.

If I just write out all the options the model directive seems to grab it and work correctly.

[gaydenko]

@jackdempsey It is closed as far as in vuejs/Discussion an issue status hasn't great sense, as @yyx990803 has pointed in another discussion :)

My current variant (just use own tools to deal with events listening) is presented below and at my use cases does work as I'm expecting for:

'use strict';
var dx = require('./dx');
// dir.vm.$get(dir.key) on init must provide:
//   options - key in the model to the array of pairs { label, value } 
//   label - label key in pair, defaults to 'label'
//   value - value key in pair, defaults to 'value'
// Or, if it is a string rather an object, it's just pairs key with default
// names for label and value.
// After init dir.key path is used to store selected object ;)

var sel = Object.create(null);

sel._fillIn = function(pairs) {
    var self = this;
    self.el.options.length = [];
    for (var i = 0; i < pairs.length; i++) {
        var pair = pairs[i];
        var op = new Option(pair[self.cfg.label]);
        self.el.options.add(op);
    }
};

sel._idxOfValue = function(pairs, value) {
    for (var i = 0; i < pairs.length; i++)
        if (value === pairs[i][this.cfg.value])
            return i;
    return -1;
};

sel.bind = function() {
    var self = this;

    // get configuration ----------------------------
    var cfg = self.vm.$get(self.key);
    self.vm.$set(self.key, undefined); // if pairs array is empty
    self.cfg = Object.create(null);
    if (typeof cfg === 'string') {
        self.cfg.options = cfg;
        self.cfg.label = 'label';
        self.cfg.value = 'value';
    }
    else {
        self.cfg.options = cfg.options;
        self.cfg.label = cfg.label || 'label';
        self.cfg.value = cfg.value || 'value';
    }

    // initial filling in ----------------------------
    var pairs = self.vm.$get(self.cfg.options) || []; // can be not set on initial render
    self._fillIn(pairs);
    if (self.el.options.length > 0)
        self.el.options.selectedIndex = 0;

    // listen to selection ----------------------------
    self.selectCallback = function() {
        if (self.el.options.selectedIndex >= 0) {
            var value = self.vm.$get(self.cfg.options)[self.el.options.selectedIndex][self.cfg.value];
            var current = self.vm.$get(self.key);
            if (current !== value)
                self.vm.$set(self.key, value);
        }
        else
            self.vm.$set(self.key, undefined);
    };
    dx.listen(self.el, 'change', self.selectCallback);

    // listen to pairs change --------------------------
    self.pairsCallback = function(newPairs) {
        var current = self.vm.$get(self.key);
        self._fillIn(newPairs);
        // try to set index in accordance with current value
        if (current || current === 0) {
            var newIdx = self._idxOfValue(newPairs, current);
            if (newIdx >= 0) {
                self.el.options.selectedIndex = newIdx;
                return;
            }
        }
        // new pairs haven't current value - defaulting to the first
        if (self.el.options.length > 0)
            self.el.options.selectedIndex = 0;
        dx.trigger(self.el, 'change');
    };
    self.vm.$watch(self.cfg.options, self.pairsCallback);

};

sel.update = function(newVal) { // expected be found in pairs
    var self = this;
    var pairs = self.vm.$get(self.cfg.options) || [];
    var newIdx = self._idxOfValue(pairs, newVal);
    if (newIdx < 0 && self.el.options.length > 0)
        newIdx = 0;
    self.el.options.selectedIndex = newIdx;
    dx.trigger(self.el, 'change');
};

sel.unbind = function() {
    var self = this;
    dx.deaf(self.el, 'change', self.selectCallback);
    self.vm.$unwatch(self.cfg.options, self.pairsCallback);
};

module.exports = sel;

[jackdempsey]

Thanks so much Andrew!

On Fri, Jul 25, 2014 at 5:18 PM, Andrew Gaydenko [email protected]
wrote:

@jackdempsey https://github.com/jackdempsey It is closed as far as in
vuejs/Discussion an issue status hasn't great sense, as @yyx990803
https://github.com/yyx990803 has pointed in another discussion :)

My current variant (just use own tools to deal with events listening) is
presented below and at my use cases does work as I'm expecting for :)

'use strict';var dx = require('./dx');// dir.vm.$get(dir.key) on init must provide:// options - key in the model to the array of pairs { label, value } // label - label key in pair, defaults to 'label'// value - value key in pair, defaults to 'value'// Or, if it is a string rather an object, it's just pairs key with default// names for label and value.// After init dir.key path is used to store selected object ;)
var sel = Object.create(null);
sel._fillIn = function(pairs) {
var self = this;
self.el.options.length = [];
for (var i = 0; i < pairs.length; i++) {
var pair = pairs[i];
var op = new Option(pair[self.cfg.label]);
self.el.options.add(op);
}};
sel._idxOfValue = function(pairs, value) {
for (var i = 0; i < pairs.length; i++)
if (value === pairs[i][this.cfg.value])
return i;
return -1;};
sel.bind = function() {
var self = this;

// get configuration ----------------------------
var cfg = self.vm.$get(self.key);
self.vm.$set(self.key, undefined); // if pairs array is empty
self.cfg = Object.create(null);
if (typeof cfg === 'string') {
    self.cfg.options = cfg;
    self.cfg.label = 'label';
    self.cfg.value = 'value';
}
else {
    self.cfg.options = cfg.options;
    self.cfg.label = cfg.label || 'label';
    self.cfg.value = cfg.value || 'value';
}

// initial filling in ----------------------------
var pairs = self.vm.$get(self.cfg.options) || []; // can be not set on initial render
self._fillIn(pairs);
if (self.el.options.length > 0)
    self.el.options.selectedIndex = 0;

// listen to selection ----------------------------
self.selectCallback = function() {
    if (self.el.options.selectedIndex >= 0) {
        var value = self.vm.$get(self.cfg.options)[self.el.options.selectedIndex][self.cfg.value];
        var current = self.vm.$get(self.key);
        if (current !== value)
            self.vm.$set(self.key, value);
    }
    else
        self.vm.$set(self.key, undefined);
};
dx.listen(self.el, 'change', self.selectCallback);

// listen to pairs change --------------------------
self.pairsCallback = function(newPairs) {
    var current = self.vm.$get(self.key);
    self._fillIn(newPairs);
    // try to set index in accordance with current value
    if (current || current === 0) {
        var newIdx = self._idxOfValue(newPairs, current);
        if (newIdx >= 0) {
            self.el.options.selectedIndex = newIdx;
            return;
        }
    }
    // new pairs haven't current value - defaulting to the first
    if (self.el.options.length > 0)
        self.el.options.selectedIndex = 0;
    dx.trigger(self.el, 'change');
};
self.vm.$watch(self.cfg.options, self.pairsCallback);

};
sel.update = function(newVal) { // expected be found in pairs
var self = this;
var pairs = self.vm.$get(self.cfg.options) || [];
var newIdx = self._idxOfValue(pairs, newVal);
if (newIdx < 0 && self.el.options.length > 0)
newIdx = 0;
self.el.options.selectedIndex = newIdx;
dx.trigger(self.el, 'change');};
sel.unbind = function() {
var self = this;
dx.deaf(self.el, 'change', self.selectCallback);
self.vm.$unwatch(self.cfg.options, self.pairsCallback);};
module.exports = sel;

—
Reply to this email directly or view it on GitHub
#50 (comment).