Vue-material: Error in nextTick: "ReferenceError: isLocalValueSet is not defined"

[davidhoeck]

I really don't know how to reproduce this error. I just ran yarn upgrade.

Output of the console:

vue.runtime.esm.js?2b0e:587 [Vue warn]: Error in nextTick: "ReferenceError: isLocalValueSet is not defined"
warn @ vue.runtime.esm.js?2b0e:587
logError @ vue.runtime.esm.js?2b0e:1733
globalHandleError @ vue.runtime.esm.js?2b0e:1728
handleError @ vue.runtime.esm.js?2b0e:1717
(anonymous) @ vue.runtime.esm.js?2b0e:1835
flushCallbacks @ vue.runtime.esm.js?2b0e:1754
run @ es6.promise.js?551c:75
(anonymous) @ es6.promise.js?551c:92
flush @ _microtask.js?8079:18
characterData (async)
notify @ _microtask.js?8079:39
(anonymous) @ _microtask.js?8079:66
notify @ es6.promise.js?551c:56
$resolve @ es6.promise.js?551c:162
(anonymous) @ _ctx.js?9b43:8
settle @ settle.js?467f:16
handleLoad @ xhr.js?b50d:77
XMLHttpRequest.send (async)
dispatchXhrRequest @ xhr.js?b50d:178
Promise @ es6.promise.js?551c:177
xhrAdapter @ xhr.js?b50d:12
dispatchRequest @ dispatchRequest.js?5270:59
run @ es6.promise.js?551c:75
(anonymous) @ es6.promise.js?551c:92
flush @ _microtask.js?8079:18
characterData (async)
notify @ _microtask.js?8079:39
(anonymous) @ _microtask.js?8079:66
notify @ es6.promise.js?551c:56
$resolve @ es6.promise.js?551c:162
(anonymous) @ _ctx.js?9b43:8
module.exports @ _promise-resolve.js?bcaa:10
resolve @ es6.promise.js?551c:240
wrappedActionHandler @ vuex.esm.js?2f62:713
dispatch @ vuex.esm.js?2f62:426
boundDispatch @ vuex.esm.js?2f62:332
setLoading @ ui-helper.js?4a2b:17
enableLoading @ ui-helper.js?4a2b:21
editProduct @ product-list.vue?aaa9:157
click @ product-list.vue?e0a9:180
invoker @ vue.runtime.esm.js?2b0e:2023
fn._withTask.fn._withTask @ vue.runtime.esm.js?2b0e:1822
vue.runtime.esm.js?2b0e:1737 ReferenceError: isLocalValueSet is not defined
    at VueComponent.setLocalValueIfMultiple (vue-material.js?43f9:7984)
    at VueComponent.initialLocalValueByDefault (vue-material.js?43f9:8001)
    at VueComponent.setMultipleContentByValue (vue-material.js?43f9:7958)
    at VueComponent.setFieldContent (vue-material.js?43f9:7975)
    at VueComponent.handler (vue-material.js?43f9:7841)
    at VueComponent.Vue.$watch (vue.runtime.esm.js?2b0e:3609)
    at createWatcher (vue.runtime.esm.js?2b0e:3567)
    at initWatch (vue.runtime.esm.js?2b0e:3546)
    at initState (vue.runtime.esm.js?2b0e:3313)
    at VueComponent.Vue._init (vue.runtime.esm.js?2b0e:4624)

[Samuell1]

Looks like missing this in MdSelect for function calling.

For temporary fix you can edit this line in your node_modules : https://github.com/vuematerial/vue-material/blob/dev/dist/vue-material.js#L7984

from: if (isLocalValueSet()) { to: if (this.isLocalValueSet()) {

[Samuell1]

Fixed in commit: https://github.com/vuematerial/vue-material/commit/7a690bacfca2e85629093d3fb9e05408f26f8de5

[r-nicol]

Any eta on when this might get merged in to a release?

[h4wkmoon]

Looks like this issue as been fixed, forgotten and never merged. :cry:
Until then md-select mutliple is unusable.

I made the modification mentioned as a workaround, but no success. What worked is to make the change all the file defining the function "setLocalValueIfMultiple"
How can I make this change portable in my automated pipelines ?
node_modules folder is in gitignore.

[Samuell1]

@h4wkmoon Only way is to fork dev branch and use your fork in your project. (Dont forget to rebuild lib)

[caweidmann]

Leaving this here in case someone runs into a similar situation as I have. The issue mentioned above occurred for me when adding the :selected property to my <md-option>. I manually resolved it by using :ref combined with $nextTick() and the isChecked property.

Copy/pasting the code below will not work for you as it references random variables. It's there to give a rough idea of what I did.

Instead of:

<md-select v-model="subscriptions" name="subscriptions" id="subscriptions" multiple>
  <md-option
    v-for="option in subscriptionOptions"
    :key="option.name"
    :value="option.id"
    :selected="subscriptionOptions.length && subscriptions.includes(option.id)"
  >
    {{ option.name }}
  </md-option>
</md-select>

I remove the :selected and replace with a :ref:

<md-select v-model="subscriptions" name="subscriptions" id="subscriptions" multiple>
  <md-option
    v-for="option in subscriptionOptions"
    :key="option.name"
    :value="option.id"
    :ref="`subscriptionOption_${option.id}`"
  >
    {{ option.name }}
  </md-option>
</md-select>

And in my code I attach something along the lines of the following:

created() {
  Subscriptions.getSubscriptions().then(res => {
    this.subscriptionOptions = res;
    this.$nextTick(() => {
      const activeIds = this.subscriptions.map(subscription => subscription.id);
      activeIds.forEach(id => {
        this.$refs[`subscriptionOption_${id}`][0].isChecked = true;
      });
    });
  });
},

[r-nicol]

@Samuell1 why was this never actually pulled in master? Is it just a case that no one put in a PR to master? Or is there another reason like it's part of a bigger change for a future release?

[Samuell1]

@r-nicol Because all changes go first to develop then it will be released and merged to master.

[r-nicol]

@Samuell1 Thanks for coming back to me and yes completely follow. I was just making sure for anyone else that lands on this issue thread that the fix wasn't lost and forgotten. As it's a bit confusing with the issue flagged as Closed, but the fix is not yet in a stable release, and there was no mention of whether it was coming. I will leave you to it thanks!

[Samuell1]

@r-nicol Now we need to wait for new version where are many fixes and features (dev branch) but i think owner is now very busy :(

[Thyiad]

I have same problem

[uicestone]

Hey guys, I found that if you init v-model of md-select with an empty array, multiple works just fine.