[SOLVED] Using Bootstrap-Select and Vue together

I ran into some trouble when trying to use Vue bindings and Bootstrap-Select together that kept the visual controls from updating when options were changed via a Vue model update. 

I wrote up an article on my JavaScriptJedi.com website with both broken and working examples and an explanation about what happens.

The quick answers for making sure bootstrap-select works with Vue:

  • Prevent bootstrap-select from automatically hooking itself up to your controls by avoiding using the "selectpicker" class on the <select> element.  Use a different class like "select-picker" instead that you can manually hook up the selectpicker after your Vue model is finished mounting.
    • (Use Vue's $nextTick function inside your "mounted" handler function to ensure all components/child-components are mounted as well before setting up bootstrap-select)
  • Only use the "title" HTML attribute on your <select> when you don't have a default selected value on your <select>
  • ALWAYS call bootstrap-select's "refresh" after changing the <select>'s options via an update to the Vue model.
Please see my write-up on JavaScript Jedi and leave feedback here if you can help me enhance the article or find it helpful.  I hope this saves someone some time and frustration! 


[Azure DevOps] Pending Changes gives "you are not authorized to access ..." error during Check-In

For some reason lately I have been periodically getting "... you are not authorized to access [filename.extension] ..." after clicking on the Check-In button in the "Pending Changes" section of the "Team Explorer" tab in Visual Studio.

I can't explain why this happens, but the workaround I've discovered is to click the "Refresh" button at the top of the dialog.  Once the refresh is complete, the check-in process seems to work fine.  I hope it works for you as well.

If you have run into the same and can explain why, please share in the comments.

Happy coding!


ASP.NET MVC: Controlling order when using Scripts.Render

The Problem

I like concise, so when I realized I could change the following:


... to ...

@Scripts.Render("~/bundles/bundle1", "~/bundles/bundle2", "~/bundles/bundle3", "~/bundles/bundle4")

... naturally I got excited.  And it worked really well, that is, until I needed bundle3 to come before bundle1.

For a more realistic example, I have my own bundle that is dependent on KnockoutJS and requires Knockout to be loaded before my bundle is.  It would look like this:

@Scripts.Render("~/bundles/something", "~/bundles/knockout", "~/bundles/adminView")

I assumed that the bundles would be rendered in the same order I specified in that call, but it doesn't seem to play nice that way. My "~/bundles/adminView" was rendered before Knockout which broke my script.

To fix it, I removed my bundle from the rest of the list and moved it out into a separate Scripts.Render call. Now it looks like:

@Scripts.Render("~/bundles/something", "~/bundles/knockout")

Doing this forced my "adminView" bundle to be rendered after the other two because it was a separate call.

Moral of the Story

You can only "bundle" multiple bundle paths in one Scripts.Render call when none of them depend on each other, because you can't count on what order they will be rendered in. I don't know how Microsoft decides the order to render them in, but it's not necessarily the order you provide.

If order matters, use separate calls and order them the way you need to.


NUnit 3.x: Asserting Equal Decimal Values with a Precision Threshold

With the newer style of doing assertions in NUnit 3.x, I was trying to figure out how to assert a decimal whose value was 1 digit precision on the right-side of the decimal, but only allowing a variance of 0.0001.

I believe this is the best practice, but will be happy to be corrected if someone knows a better way.

Assert.That(actualObject.SomeDecimalValue, Is.EqualTo(42.6m).Within(0.0001m));